AngularJS The scope for dynamic content through $compile isn't attached to the controller scope

StackOverflow https://stackoverflow.com/questions/15911699

質問

When I generate a new element through a string that has a directive (that's why I need to compile) and that directive generates an association with a variable in the controller scope through "=", the variable in my controller isn't associated to the one in the directive.

I created a jsfiddle to show the example where the "door" ng-model value should be associated to all the directives model values.

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

Another thing I notice is that the directive that run from elements present in the html show the correct association through the variables (controller and directive).

The html (there is the 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 the directive that compiles the string that has the directive that doesn't 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 "door" ng-model values together? Where is the compiled directive binding to?

役に立ちましたか？

解決

You just have to pass the doorval reference down through all directives without skip any one. The problem was the listActions directive didn't had access to doorval in its scope. Check this out: http://jsfiddle.net/aVJqU/5/

他のヒント

@Danypype is basically correct as the problem occurs due to scope isolation, as explained in the documentation.

An alternative solution is to simply eliminate the scope isolation by removing the scope block from within the directive definition.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top