当我通过一个带有指令的字符串生成一个新元素（这就是我需要编译的原因）并且该指令通过“=”生成与控制器范围中的变量的关联时，我的控制器中的变量与一个在指令中。
我创建了一个jsfiddle来显示示例，其中“门”ng模型值应该与所有指令模型值相关联。
看到这个小提琴： http ： //jsfiddle.net/aVJqU/2/
我注意到的另一件事是，从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模型值绑定在一起？ 编译指令绑定到哪里？
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?
最满意答案
你只需要通过所有指令传递doorval参考，而不必跳过任何一个。 问题是listActions指令在其范围内无法访问doorval 。 看看这个： http ： //jsfiddle.net/aVJqU/5/
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/
更多推荐
发布评论