置き換えを使用すると、角孤立スコープの値がテンプレートに表示されない

Question

小さなアプリケーションを作成していて、テンプレートに次の指示があります。

smallgrid.directive.js：

angular.module('myActions') 
    .directive('smallgrid', ['$rootScope', function($rootScope) { 
     return { 
      restrict: "E", 
      scope: { 
       actionable: "=" 
      }, 
      controller: function($scope) { 
       $scope.setLocation = function() { 
        console.log("yee"); 
       }; 
      } 
     }; 
    }]) 
    .directive('three', function() { 
     return { 
      replace: true, 
      templateUrl: '/app/my_actions/directives/templates/grid3x3.template.html' 
     }; 
    }) 
    .directive('four', function() { 
     return { 
      replace: true, 
      templateUrl: '/app/my_actions/directives/templates/grid4x4.template.html' 
     }; 
    }) 
    .directive('five', function() { 
     return { 
      replace: true, 
      templateUrl: '/app/my_actions/directives/templates/grid5x5.template.html' 
     }; 
    }); 

grid3x3.template.html

<div class="k-edit-field" id="board"> 
    <div class="row" ng-click="setLocation()"> 
     {{actionable.probability}} 
    </div> 
</div> 

次のように私はこのディレクティブを使用します。

<smallgrid three actionable="currentAction.actionable" ng-if="somecondition"></smallgrid> 

UIが正しくレンダリングされます。ただし、{{actionable.probability}}が空で、Clickイベントが発生していないことを示しています。ただし、分離スコープを削除して変数に直接アクセスすると、値を取得できます。私は、孤立スコープを使用しているときにthree指示文でsmallgridの値にアクセスできないことを理解しています。 smallgridの値をテンプレートに渡す方法はありますか？

Answer 1

ディレクティブの属性としてディレクティブを渡すと、スコープに問題があります。

ng-transcludeのネストされたディレクティブにスコープ継承を使用すると、よりよく表示されます。

だからあなたの出発点は、

<smallgrid actionable="currentAction.actionable" ng-if="somecondition"> 
    <three></three> 
</smallgrid> 

この方法<three>は$parent

function smallgrid() { 
 
    return { 
 
    restrict: "E", 
 
    transclude: true, 
 
    scope: { 
 
     actionable: "=" 
 
    }, 
 
    template: `<div ng-transclude></div>`, 
 
    controller: function($scope) { 
 
     $scope.setLocation = function() { 
 
     console.log("yee"); 
 
     }; 
 
    } 
 
    }; 
 
} 
 
function three() { 
 
    return { 
 
    template: `<div class="k-edit-field" id="board"> 
 
       <div class="row" ng-click="$parent.setLocation()"> 
 
        test = {{$parent.actionable.probability}} 
 
       </div> 
 
       </div>` 
 
    }; 
 
} 
 
function myController($scope) { 
 
    $scope.currentAction = {actionable: {probability: "test"}}; 
 
    $scope.somecondition = true; 
 
} 
 
angular.module('myApp', []); 
 
angular 
 
    .module('myApp') 
 
    .controller('myController', myController) 
 
    .directive('smallgrid', smallgrid) 
 
    .directive('three', three);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="myController"> 
 
    <smallgrid actionable="currentAction.actionable" ng-if="somecondition"> 
 
     <three></three> 
 
    </smallgrid> 
 
    </div> 
 
</div>