javascript – AngularJS通过$compile的动态内容范围没有附加到控制器范围

2019-06-20 13:20:18 阅读：237 来源： 互联网

标签：javascript angularjs angularjs-scope angularjs-directive angularjs-controller

当我通过具有指令的字符串生成新元素(这就是我需要编译的原因)并且该指令通过“=”生成与控制器范围中的变量的关联时,我的控制器中的变量不与一个在指令中.

我创建了一个jsfiddle来显示“门”ng模型值应该与所有指令模型值相关联的示例.

我注意到的另一件事是,从html中存在的元素运行的指令通过变量(控制器和指令)显示正确的关联.

html(有绑定< 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>

这是指令：

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
    }
})

这是控制器：

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>'
    }]
})

最后,这是编译具有不绑定指令的字符串的指令：

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))
                }
            })
        }
    }
})

我该怎么做才能将所有“门”ng模型值绑定在一起？
编译指令绑定到哪里？

解决方法:

你只需要通过所有指令传递门文件参考,而不必跳过任何一个.问题是listActions指令在其范围内无法访问doorval.
看看这个：http://jsfiddle.net/aVJqU/5/

标签：javascript,angularjs,angularjs-scope,angularjs-directive,angularjs-controller
来源： https://codeday.me/bug/20190620/1244566.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – AngularJS通过$compile的动态内容范围没有附加到控制器范围