AngularJS 사용자 정의 명령어 및 명령어 구성 항목에 대한 구현 기술

AngularJS 사용자 정의 명령어를 작성하는 방법에는 두 가지가 있습니다. 이 글에서는 주로 AngularJS에서 사용자 정의 명령어와 명령어 구성 항목을 구현하는 방법을 소개하며, 예제 형식으로 AngularJS 사용자 정의 명령어와 명령어 구성 항목의 구현 기술을 간략하게 요약하고 분석합니다. 도움이 필요한 친구들이 참고하면 도움이 될 것 같아요.

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

명령 구성 항목

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

관련 권장 사항:

Vue.js 사용자 정의 명령 방법

요약 상세 맞춤 명령어 소개

AngularJS에서 맞춤 명령어를 만드는 방법에 대한 자세한 설명

위 내용은 AngularJS 사용자 정의 명령어 및 명령어 구성 항목에 대한 구현 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!