AngularJS:隔离范围 + 双向绑定 + ng-repeat 不起作用 [英] AngularJS : isolated scope + two-way binding + ng-repeat not working

问题描述

ng-repeat 不输出任何内容.在链接函数中，我可以看到 $scope.clients 是一个数组.如果我删除隔离范围，并使用父范围，ng-repeat 工作.

带有指令clients"的html.

<fieldset clients="summaryReport.clients"><legend>客户</legend><div align="left"><div ng-repeat="client in clients track by $index">{{客户}}

</fieldset>

指令

var clients = function(){变量定义 = {限制:A"，范围:          {客户:=客户"},链接:函数($scope,$element,attributes){}}返回定义；}

解决方案

这是一个我似乎经常回答的常见问题.指令可以嵌套其他 HTML 元素，就像 可以嵌套在

中一样.然而，嵌套在指令中的元素不是指令的一部分，并且不限于指令的范围，它们的范围是它们所在的 HTML.唯一可以访问隔离范围的项目是指令定义中的 compile、link、controller 和 template 项.如果您将内部 html 从字段集内部移动到模板中，它将按预期运行.

您也可以参考 http://angular-tips.com/blog/2014/03/transclusion-and-scopes/ 了解更多示例和测试方法.

the ng-repeat outputs nothing. in the link function, i can see $scope.clients is an array. if i remove the isolate scope, and use the parent scope, the ng-repeat works.

html with directive "clients".

<div container 
     ng-cloak 
     ng-app="summaryReportApp" 
     ng-controller="summaryReportController as summaryReport">

<fieldset clients="summaryReport.clients">
<legend>Clients</legend>
<div align="left">
    <div ng-repeat="client in clients track by $index">
        {{client}}
    </div>
</div>
</fieldset>

</div>

directive

var clients = function(){
    var definition = {
        restrict:       "A",
        scope:          {
                            clients:"=clients"
                        },
        link:           function($scope,$element,attributes){
                        }
    }

    return definition;
}

解决方案

This is a common question I seem to answer frequently. Directives can have other HTML Elements nested in them, in the same way that an <input> can be nested inside a <div>. However, the Elements nested inside the Directive are not part of the directive, and are not scoped to the directive, they are scoped to the HTML they are in. The only items that have access to the Isolated Scope are the compile, link, controller, and template items in the directive definition. If you moved your inner html from inside the fieldset into a template, it would function as expected.

You can also reference http://angular-tips.com/blog/2014/03/transclusion-and-scopes/ for more examples and ways to test this.

这篇关于AngularJS:隔离范围 + 双向绑定 + ng-repeat 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！