하위 요소의 액세스 범위 지시문

children 요소에서 directive scope에 액세스하려고하는데 테스트 기능이 실행되지만 작동하지 않습니다.하위 요소의 액세스 범위 지시문

HTML

<div my-directive> 

    <div ng-click="triggerFromDirective('hello')">Click me</div> 

</div>

지침

.directive('myDirective', function() { 

     return { 
      scope: {}, 
      controller: function($scope) { 

       // This function doesn't fire when click on the 
       // element 
       $scope.triggerFromDirective = function(msg) { 
        alert(msg); 
       } 
      } 
     } 
});

가이 방식으로 지시자에 기능을 실행할 수 있습니까? 그렇지 않다면 어떻게 그걸 성취합니까?

출처

2014-12-17 Fabrizio

일반적으로 스코프를 혼합하는 것은 좋지 않습니다. 귀하의 지시어 (외부 범위에 거주)의 소비자는 일반적으로 'triggerFromDirective' (지시문의 격리 범위에서 정의 됨)를 알지 못합니다. –

이 [image] (http://angular-tips.com/images/) transclusionscopes/diag2.jpg) 꽤 많이 요약합니다. 내부 요소는 "my-directive"에 대한 형제 범위를가집니다. 'triggerFromDirective'를 실행시키는 방법은'my-directive'에 템플릿으로 포함시키는 것입니다. – Pete

@NewDev 사실입니다, Pete Yhea 감사합니다. :) – Fabrizio

저는 새 개발팀이 말했듯이 범위가 엇갈리고 있다고 생각합니다. 지시문 div 안의 코드는 자동으로 지시문에 추가되지 않습니다. 나는 당신의 목표가 여기에 무엇인지 100 % 확신하지는 않지만 보통 지시문에 HTML을 추가하기 위해 템플릿이 사용됩니다. 이 템플릿은 지시어 범위에 액세스 할 수 있습니다.

ngTransclude을 살펴볼 수도 있습니다. 예 : http://jsfiddle.net/8Lbrsw35/ 그리고 여기 코드이다

<body> 
    <div ng-app="app"> 
     <div my-directive></div> 
    </div> 
</body>

app.directive('myDirective', function(){ 
    return { 
     restrict: 'AE', 
     scope: {}, 
     template: '<div ng-click="triggerFromDirective(\'hello\')">Click me</div>', 
     controller: function($scope){ 
      $scope.triggerFromDirective = function(msg) { 
       alert(msg); 
     }; 
    } 
};

});

출처

2014-12-17 15:32:51 user1600704

Yhea 정확히 내가 궁금해 한 것입니다 :) – Fabrizio

하위 요소의 액세스 범위 지시문

답변

관련 문제