전화 컨트롤러 $ 범위 방법

Question

내가 가지고있는 다음과 같은 지침 :

지침 1 개

app.directive('tableDiv', function() { 
    return { 
     templateUrl: 'js/directives/table-div/table-div.html', 
     replace: true, 
     scope: { 
      table: '=', 
     }, 
     controller: function ($scope, $element, $attrs) { 

     }, 
     link: function postLink(scope, element, attrs) { 

     } 
    } 
}); 

지침 1 템플릿 :

<div data-table-div-row value="row" sizes="table.tbody.sizes" ng-repeat="row in table.tbody.values"> 
</div> 

지침 2 :

app.directive('tableDivRow', function ($rootScope) { 
    return { 
     templateUrl: 'js/directives/table-div/table-div-row.html', 
     replace: true, 
     scope: {value: '=', sizes: '='}, 
     controller: function ($scope, $element, $attrs) { 
      $scope.showInfo = function() { 
       $scope.visible = true; 
      }; 

      $scope.hideInfo = function() { 
       $scope.visible = false; 
      }; 

      $scope.hasTemplate = function() { 
       return ($scope.value.template ? true : false); 
      } 

     }, 
     link: function postLink(scope, element, attrs) { 
      scope.$watch(function() { 
       return scope.visible; 
      }, function (value) { 
       if (value === true) { 
        $(element).find('div.table-row').addClass('open'); 
        $(element).find('div.table-row.edit').removeClass('hidden'); 
       } else { 
        $(element).find('div.table-row').removeClass('open'); 
        $(element).find('div.table-row.edit').addClass('hidden'); 

       } 
      }, true); 
     } 
    } 
}); 

Directive 2 templa 테 : 나는 컨트롤러 $ 범위 모델을 기반으로 동적 템플릿을 포함하고있어 두 번째 지침 템플릿 내부

<div> 
<div class="row-fluid"> 
    <div class="table-row clearfix"> 
     <div class="{{sizes.first}} first">{{value.display.first}}</div> 
     <div ng-repeat="cell in value.display.cells" class="{{sizes.cells[$index]}}">{{cell}}</div> 
     <div class="{{sizes.last}} last regular"> 
      <div ng-switch on="value.display.last"> 
       <div ng-switch-when="%editbutton%"> 
        <div class="show-info closed" ng-click="showInfo()"></div> 
       </div> 
       <div ng-switch-default> 
        {{value.display.last}} 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div ng-if="hasTemplate()"> 
    <ng-include src="value.template"></ng-include> 
</div> 

. 해당 템플릿과 지시문 템플릿에서 컨트롤러 $ scope에서 함수를 호출하려고합니다. 그것을 성취 할 수있는 방법이 있습니까?

Answer 1

그래서 그것은 문서에있는 것 같아서 충분히 명확하지 않습니다.

<div data-table-div-row method="method()" value="row" sizes="table.tbody.sizes" ng-repeat="row in table.tbody.values"></div> 

이런 식 방법에있어서 :

scope: { 
     table: '=', 
     method: '&' 
    }, 

내가 지시어를 호출 템플릿 내부 method: '&'에서, method HTML 속성이 마지막에 ()이 있어야합니다 지시문 선언 내부 내가 추가 할 필요 두 번째 지시어로 전달할 수 있습니다.

Answer 2

<ng-include src="value.template"></ng-include>에 대해 하위 범위가 생성됩니다. 즉, 부모 함수가이 템플릿에서 사용 가능해야합니다. 다른 말로하면, 아무 것도 할 필요가 없으며 작동 할 것입니다.이 간단한 예제를보십시오. http://plnkr.co/edit/Es2UL09ASPSTa5Fstzjf?p=preview

Answer 3

으로 @Direvius 당신이 아니라 매개 변수 매개 변수 자체 물체를 통과하는 메서드를 호출해야합니다 지침에서 컨트롤러 범위에서 메소드를 호출하기 위해 제안 :

scope.method({message : "text"}); 

그래서를 컨트롤러 메소드를 호출하는

scope.method({message : {message : "text"}}); 

중첩 지시 템플릿과 HTML에서 외부 지시문을 선언 인수로 "메시지"를 선언하는 것을 잊지 마세요 :

중첩 된 지침에서 당신은 n 개의 객체 내부의 매개 변수를 포장해야 당신의 외부 템플릿도

<outer-directive outer-method-arg="method(message)"></outer-directive> 

:

<inner-directive inner-method-arg="method(message)"></inner-directive>