Ausführliche Erklärung zur Implementierung benutzerdefinierter Anweisungen in AngularJS

In diesem Artikel wird hauptsächlich die Methode zum Implementieren benutzerdefinierter Anweisungen und Befehlskonfigurationselemente in AngularJS vorgestellt. Er fasst die Implementierungsfähigkeiten benutzerdefinierter Anweisungen und Befehlskonfigurationselemente in Form von Beispielen kurz zusammen . Ich hoffe, es kann allen helfen.

Es gibt zwei Möglichkeiten, benutzerdefinierte AngularJS-Anweisungen zu schreiben:

//第一种
angular.module('MyApp',[])
.directive('zl1',zl1)
.controller('con1',['$scope',func1]);
function zl1(){
  var directive={
    restrict:'AEC',
   template:'this is the it-first directive',
  };
  return directive;
};
function func1($scope){
  $scope.name="alice";
}
//第二种
angular.module('myApp',[]).directive('zl1',[ function(){
 return {
  restrict:'AE',
  template:'thirective',
  link:function($scope,elm,attr,controller){
   console.log("这是link");
  },
  controller:function($scope,$element,$attrs){
   console.log("这是con");
  }
 };
}]).controller('Con1',['$scope',function($scope){
 $scope.name="aliceqqq";
}]);

Richtlinienkonfigurationselemente

angular.module('myApp', []).directive('first', [ function(){
  return {
    // scope: false, // 默认值，共享父级作用域
    // controller: function($scope, $element, $attrs, $transclude) {},
    restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
    template: 'first name:{{name}}',
  };
}]).directive('second', [ function(){
  return {
    scope: true, // 继承父级作用域并创建指令自己的作用域
    // controller: function($scope, $element, $attrs, $transclude) {},
    restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
    //当修改这里的name时，second会在自己的作用域中新建一个name变量，与父级作用域中的
    // name相对独立，所以再修改父级中的name对second中的name就不会有影响了
    template: 'second name:{{name}}',
  };
}]).directive('third', [ function(){
  return {
    scope: {}, // 创建指令自己的独立作用域，与父级毫无关系
    // controller: function($scope, $element, $attrs, $transclude) {},
    restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
    template: 'third name:{{name}}',
  };
}])
.controller('DirectiveController', ['$scope', function($scope){
  $scope.name="mike";
}]);

Verwandte Empfehlungen:

vue-cli Custom Directive Add Verification Slider Detaillierte Erklärung

So verwenden Sie die benutzerdefinierte Direktive von Vue, um ein Dropdown-Menü zu vervollständigen

Eine detaillierte Einführung in die benutzerdefinierte Direktive von Angularjs Direktive

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Implementierung benutzerdefinierter Anweisungen in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!