2013-05-03 4 views
3

jsfiddle here. 지시어 우선 순위와 터미널 속성을 실험 해 왔습니다. 우선 순위 3, 2 및 1의 세 가지 지시문을 만들었습니다. 기본 지시문 (가장 높은 우선 순위, 우선 순위 : 3)에는 버튼을 만드는 템플릿이 있으며 단추를 클릭하면 지시문의 컨트롤러에 대한 메서드가 호출됩니다. 우선 순위 2 지시문에 terminal : true를 넣을 때까지 모든 것이 잘 작동합니다. 버튼이 작동을 멈추게하는 이유가 있습니다. 주 지시문 (우선 순위 3)은 훌륭하게 렌더링되지만 버튼을 클릭해도 아무런 효과가 없습니다. 다시 말하지만, 여기에 jsfiddle이며, 여기에 지침에 대한 코드입니다 :AngularJS 터미널 지시문이 작동하지 않습니다.

myApp = angular.module('myApp', []) 
    .directive('greeting', function() { 
     return { 
      restrict: 'E', 
      replace: true, 
      priority: 3, 
      template: "<button class='btn' ng-click='sayHello()'>Say Hello</button>", 
      controller: function($scope) { 
       var greetings = ['hello']; 
       $scope.sayHello = function() { 
        alert(greetings.join()); 
       } 
       this.addGreeting = function(greeting) { 
        greetings.push(greeting); 
       } 
      } 
     }; 
    }) 
    .directive('finnish', function() { 
     return { 
      restrict: 'A', 
      priority: 2, 
      terminal:true, 
      require: 'greeting', 
      link: function(scope, element, attrs, controller) { 
       controller.addGreeting('hei'); 
      } 
     }; 
    }) 
    .directive('hindi', function() { 
     return { 
      restrict: 'A', 
      priority: 1, 
      require: 'greeting', 
      link: function(scope, element, attrs, controller) { 
       controller.addGreeting('नमस्ते'); 
      } 
     }; 
    }); 

가 페이지의 HTML은 다음과 같습니다

<body ng-app="myApp"> 
    <greeting finnish hindi /> 
</body> 

답변

4

AngularJS와 코드 (특히 applyDirectivesToNode here)를 디버깅 보이는 finnish 지시문에 terminal:true을 설정하면 ng-click (자체는 우선 순위 0으로 설정되고 우선 순위 2보다 낮은 지시문) 처리가 중지됩니다. 따라서 버튼을 클릭해도 아무런 효과가 없습니다.

Here is a modified fiddleng-click을 종료하지 않도록 지시문의 우선 순위를 각각 0, -1 및 -2로 변경했습니다.

myApp = angular.module('myApp', []) 
    .directive('greeting', function() { 
     return { 
      restrict: 'E', 
      replace: true, 
      priority: 0, 
      template: "<button class='btn' ng-click='sayHello()'>Say Hello</button>", 
      controller: function($scope) { 
       var greetings = ['hello']; 
       $scope.sayHello = function() { 
        alert(greetings.join()); 
       } 
       this.addGreeting = function(greeting) { 
        greetings.push(greeting); 
       } 
      } 
     }; 
    }) 
    .directive('finnish', function() { 
     return { 
      restrict: 'A', 
      priority: -1, 
      terminal:true, 
      require: 'greeting', 
      link: function(scope, element, attrs, controller) { 
       controller.addGreeting('hei'); 
      } 
     }; 
    }) 
    .directive('hindi', function() { 
     return { 
      restrict: 'A', 
      priority: -2, 
      require: 'greeting', 
      link: function(scope, element, attrs, controller) { 
       controller.addGreeting('नमस्ते'); 
      } 
     }; 
    }); 
+0

그건 완전히 의미가 있습니다! 그걸 파고 주셔서 감사합니다! –

0

@Jim Cooper, Angular-1.2.1을 사용하는 경우 버튼 클릭시 "hello, hie"가 표시됩니다. 나는 이것이 결과물이어야한다고 생각한다. 그렇지 않으면 인사말의 우선 순위는 템플릿이 적용된 HTML에서 사용되는 지시어의 우선 순위에 따라 설정해야합니다. 혼란 스러울 것입니다. 우리가 내장 된 지시어와 함께 템플릿이 달린 HTML 내부에 우선 순위가 다른 사용자 지정 지시문을 도입한다면 말입니다.

관련 문제