アングルディレクティブで分離スコープとスコープを渡す関数引数を渡す

Question

スコープを分離してスコープを共有する3つのディレクティブがあり、最も内側のディレクティブの間で関数を渡したいと思います。外側と中間はスコープを分離し、内側を持つ中間はスコープを共有します。どんな提案？

以下のようにコントローラの機能を渡します。私のコントローラで

 

<outer on-edit="helloWorld" ng-model="model" ng-repeat="items in items.objects" ></outer> 

：

 

    $scope.helloWorld = function(){ 
      alert('Hello world'); 
    } 

マイディレクティブ：

 

    angular.module('myApp') 
     .directive('outer', function() { 
     return { 
      restrict: 'E', 
      replace: true, 
      scope: { 
      item: "=ngModel",   
      onEdit: '&' 
      }, 
      template: '<div><middle on-edit='onEdit'></middle></div>', 
      controller : function($scope){ 
      $scope.edit = function(){ 
       $scope.onEdit()(); 
      } 
      } 

     }; 
     }) 
     .directive('middle', function() { 
     return { 
      restrict: 'E', 
      replace: true, 
      scope: { 
      item : '=ngModel',  
      onEdit : '&' 
      },  
      templateUrl: '<div><inner on-edit='onEdit'></inner></div>'  
     }; 
     }) 
     .directive('inner', function() { 
     return { 
      restrict: 'E',  
      template: '<div><a ng-click='edit()'>Edit</a></div>' 

     }; 
     }) 

そして、これが動作しない、任意のアイデア？

おかげ

Answer 1

このかかわらず、悪いデザインに見えますが、以下のように中央のディレクティブのテンプレートにあなたが内部のディレクティブを使用している：

<div><inner on-edit='onEdit'></inner></div> 

あなたがそれを見れば、内側のディレクティブはそう、何のスコープを持っていません編集時の属性は意味をなさない。

中間ディレクティブに存在するメソッドを使用する場合は、共有スコープのために内部ディレクティブで直接使用できます。内部ディレクティブは、実行時に置き換えられる他のhtmlファイルに書かれたhtmlの一部と考えることができます。 中間ディレクティブに渡すものは暗黙的に内部に渡されます。