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
Post a Comment