Geek Answers Handbook

AngularJS Features for dynamic content using $ compilation are not tied to controller scope

When I create a new element through a line that has a directive (so I need to compile), and this directive generates a connection to a variable in the controller area via "=", the variable in my controller is not related to the one specified in the directive.

I created jsfiddle to show an example where the value of the door ng model should be associated with all the values ​​of the directives.

See this script: http://jsfiddle.net/aVJqU/2/

Another thing that I notice is that the directive, which is executed from the elements present in the html, shows the correct connection through variables (controller and directive).

html (there is a directive that binds <door> ):

 <body ng-app="animateApp"> <div ng-controller="tst"> <h2> Controller with its model </h2> <input ng-model="doorval" type="text"> </input> {{doorval}} <h2> Directive render directly from the html </h2> <door doorvalue="doorval"></door> <key></key> <h2> Directives that are compiled </h2> <list-actions actions="actions"></list-actions> </div> </body>

This is the directive:

 animateAppModule.directive('door', function () { return { restrict: "E", scope: { doorvalue:"=" }, template: '<span>Open the door <input type="text" ng-model="doorvalue"> </input> {{doorvalue}}</span>', replace: true } })

This is the controller:

 var animateAppModule = angular.module('animateApp', []) animateAppModule.controller('tst', function ($scope, tmplService) { $scope.doorval = "open" $scope.actions = tmplService; }) animateAppModule.service('tmplService', function () { return [{ form_layout: '<door doorvalue="doorval"></door> <key></key>' }, { form_layout: '<door doorvalue="doorval"></door> with this <key></key>' }] })

And finally, this is a directive that compiles a line with a directive that does not bind:

 animateAppModule.directive('listActions', function ($compile) { return { restrict: "E", replace: true, template: '<ul></ul>', scope: { actions: '=' }, link: function (scope, iElement, iAttrs) { scope.$watch('actions', function (neww, old,scope) { var _actions = scope.actions; for (var i = 0; i < _actions.length; i++) { //iElement.append('<li>'+ _actions[i].form_layout + '</li>'); //$compile(iElement.contents())(scope) iElement.append($compile('<li>' + _actions[i].form_layout + '</li>')(scope)) } }) } } })

What can I do to bind all the ng-model door values ​​together? Where is the compiled directory binding to?

+4
source share
2 answers

You just need to pass the doorval link through all the directives without missing a single one. The problem was that the listActions directive listActions not have access to doorval in its scope. Check this out: http://jsfiddle.net/aVJqU/5/

+5
source

@Danypype is mostly correct as the problem is due to the isolation of the area as described in the documentation .

An alternative solution is to simply remove the area isolation by removing the block of visibility from the definition of the directive.

0
source

More articles:


All Articles