javascript - Angular isolated scope values not visible in template when using replace -


i creating small app , have following directive template.

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> 

i use directive follows:

<smallgrid 3 actionable="currentaction.actionable" ng-if="somecondition"></smallgrid> 

the ui renders properly. shows {{actionable.probability}} empty , click event not firing. however, if remove isolated scope , access variable directly, values available. understand when using isolated scopes, in three directive, can't access values of smallgrid. there way pass values smallgrid template?

passing directive attribute of directive you're bound have scope problems.

it better if use scope inheritance nested directives ng-transclude.

so starting point should be

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

this way <three> has access $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>


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -