Directives personnalisées AngularJS et techniques de mise en œuvre des éléments de configuration de directive

Il existe deux façons d'écrire des instructions personnalisées AngularJS.Cet article présente principalement la méthode d'implémentation des instructions personnalisées et des éléments de configuration des instructions dans AngularJS. Il résume et analyse brièvement les compétences d'implémentation des instructions personnalisées et des éléments de configuration des instructions AngularJS sous la forme de. exemples. Amis qui en ont besoin Vous pouvez vous y référer, j'espère que cela pourra aider tout le monde.

Il existe deux façons d'écrire des directives personnalisées AngularJS :

//第一种
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";
}]);

Éléments de configuration des commandes

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";
}]);

Recommandations associées :

Méthode de commande personnalisée Vue.js

Résumé de l'introduction détaillée des instructions personnalisées

Explication détaillée de la façon de créer des instructions personnalisées dans AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!