AngularJS: Nested Directives - Data binding ishu -
i have nested directives.
i send data first 1 the second.
the problem lose the binding main scope.
this code: plunker
(clicking button changes value in main scope not in directive)
angular.module('app', []) .controller('mainctrl', function($scope) { $scope.change = function(){ var id = math.floor((math.random() * 4) + 0); var val = math.floor((math.random() * 100) + 1); $scope.data.items[id].id = val; } $scope.data = { items: [{ id: 1, name: "first" }, { id: 2, name: "second" }, { id: 3, name: "third" }, { id: 4, name: "forth" }] } }) .directive('firstdirective', function($compile) { return { replace: true, restrict: 'a', scope: { data: '=' }, link: function(scope, element, attrs) { var template = ''; angular.foreach(scope.data, function(item, key) { var sss = json.stringify(item).replace(/"/g, "'"); var tmp = '<div>' + '<div second-directive data="' + sss + '"></div>' + '</div>'; template = template + tmp; }); element.html(template); $compile(element.contents())(scope); } } }) .directive('seconddirective', function() { var comp = function(element, attrs){ var data = json.parse(attrs.data.replace(/'/g, "\"")); var template = '<div class="second-directive">' + '<h4>directive 2</h4>' + 'id :' + data.id + '<br />' + 'name : ' + data.name + '</div>'; element.replacewith(template); } return { replace: true, restrict: 'a', compile: comp }; });/* put css in here */ .second-directive{ border:1px solid green; padding:4px; text-align:center; width:100px; height:auto; overflow:hidden; float:left; margin:2px; }<!doctype html> <html ng-app="app"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script> <script src="app.js"></script> </head> <body ng-controller="mainctrl"> <h2>mainctrl</h2> {{data}} <br /> <button ng-click="change()">change value</button> <div first-directive data="data.items"> </div> </body> </html>thanks lot
avi
not sure why need nested directives. seems overcomplicate things. why not pass data object 1 directive , changes make in parent controller update in directive well.
http://plnkr.co/edit/gr3qbrmdotiuess6duyn?p=preview
index.html
<!doctype html> <html ng-app="app"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script> <script src="app.js"></script> </head> <body ng-controller="mainctrl"> <h2>mainctrl</h2> {{data}} <br /> <button ng-click="change()">change value</button> <div first-directive data="data.items"> </div> </body> </html> template1.html
<div> <div class="second-directive" ng-repeat="item in data"> <h4>directive</h4> id :{{ item.id }} <br /> name : {{item.name }} </div> </div> app.js
angular.module('app', []) .controller('mainctrl', function($scope) { $scope.change = function(){ var id = math.floor((math.random() * 4) + 0); var val = math.floor((math.random() * 100) + 1); $scope.data.items[id].id = val; } $scope.data = { items: [{ id: 1, name: "first" }, { id: 2, name: "second" }, { id: 3, name: "third" }, { id: 4, name: "forth" }] }; }) .directive('firstdirective', function() { return { replace: true, templateurl: 'template1.html', restrict: 'a', scope: { data: '=' }, link: function(scope, element, attrs) { } } }); if need nested directives need require option on directive definition object can specify parent directive controller injected in link function of child directive. can access properties on parent directive scope in child directive.
see: https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object
hope helps.
Comments
Post a Comment