angularjs - My directive uses isolate scope, but still fetches data from the controller's scope -
i have created 2 directives, 1 controller passed in, , other require passed it.
what trying check how directives use isolated scopes , utilize data of own scope.
but out put strange.
please follow code below,
<!doctype html> <html lang="en" ng-app="myapp"> <head> <title>recipe 02 example 01</title> <script type="text/javascript" src="d:\rahul shivsharan\javascript-framework\angularjs\angular.js"></script> <script type="text/javascript" src="d:\rahul shivsharan\javascript-framework\jquery\jquery-1.11.1.js"></script> <script type="text/javascript" src="d:\rahul shivsharan\javascript-framework\bootstrapcss\bootstrap-3.2.0-dist\js\bootstrap.js"></script> <link rel="stylesheet" href="d:\rahul shivsharan\javascript-framework\bootstrapcss\bootstrap-3.2.0-dist\css\bootstrap.css"></link> <link rel="stylesheet" href="d:\rahul shivsharan\javascript-framework\bootstrapcss\bootstrap-3.2.0-dist\css\bootstrap-theme.css"></link> <script type="text/javascript"> angular.module("myapp",[]); (function(){ angular.module("myapp").controller("myctrl",myctrl); angular.module("myapp").controller("studentctrl",studentctrl); angular.module("myapp").directive("parentclass",parentclass); angular.module("myapp").directive("childclass",childclass); function parentclass(){ var obj = { restrict : 'ea', controller : "studentctrl" } return obj; }; function childclass(){ var obj = { restrict : 'ea', require : "^parentclass", scope : { array : '=' }, template : "<ol><li ng-repeat='student in array'>{{student}}</li></ol>", link : function(scope,element,attrs,somectrl){ } } return obj; } function myctrl($scope){ $scope.studentlist = ["tom cruise","jammy watson","simon colins"] }; function studentctrl($scope){ $scope.studentlist = ["shahrukh khan","salmaan khan","amir khan"] }; })(); </script> </head> <body ng-controller="myctrl"> <parent-class> <child-class array="studentlist"></child-class> </parent-class> <pre /> <ul> <li ng-repeat="student in studentlist">{{student}}</li> </ul> </body> in above code there 2 directives 'parentclass' , 'childclass'. 'childclass' directive requires 'parentclass' parent directive, , hence 'childclass' uses controller 'studentctrl'
what expecting in output
the directive 'child-class' should print students in 'studentctrl' , student outside directives should 'myctrl',
but getting both students controller 'studentctrl',
when code change in directive 'parentclass' follows,
function parentclass(){ var obj = { restrict : 'ea', controller : "studentctrl" , scope : { array : '=' } } return obj; }; the output students controller 'myctrl' irrespective of directives closing tag.
the links live demonstration follows
what expecting directive 'child-class' should output list of students present in controller 'studentctrl' , student outside directives should output controller 'myctrl'
please solve confusion in scopes also.
thanks
in parentclass directive, not specify scope value. means defaults false.
a false scope value means directive not create new scope, meaning use scope closest (up scope chain) it.
in particular case, directive uses scope of myctrl controller. such, when specify controller: 'studentctrl', , inject $scope object set studentlist variable, overwrite value in myctrl controller - thereby giving unexpected results.
one way resolve put scope: true option parentclass directive, thereby forcing directive create new scope , not overwrite parent.
Comments
Post a Comment