AngularJS：隔离范围+双向绑定+ NG重复不工作 [英] AngularJS : isolated scope + two-way binding + ng-repeat not working

问题描述

在NG-重复输出什么。在链接功能，我可以看到$ scope.clients是一个数组。如果我删除了隔离范围，并使用父范围，NG-重复的作品。

与HTML指令客户。

 ＆LT; D​​IV容器
     NG-斗篷
     NG-应用=summaryReportApp
     NG-控制器=summaryReportController为summaryReport＆GT;＆LT;字段集客户=summaryReport.clients＆GT;
＆LT;传奇＆GT;客户与LT; /传说＆GT;
＆LT; D​​IV align =left＆GT;
    ＆LT; D​​IV NG重复=客户端的客户端跟踪由$指数＆GT;
        {{客户}}
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /字段集＆GT;＆LT; / DIV＆GT;
 

指令

  VAR的客户=功能（）{
    VAR定义= {
        限制：A，
        范围：          {
                            客户端：=客户
                        }，
        链接：功能（$范围，$元素，属性）{
                        }
    }    返回定义;
}
 

解决方案

这是一个常见的​​问题，我似乎经常回答。指令可以嵌套在他们的其他HTML元素，以同样的方式，一个＆LT;输入＆GT; 可以嵌套在＆LT; D​​IV＆GT; 。但是，嵌套在指令里面的元素未在指令的一部分，而不是范围的指令，它们被限定在他们的HTML。即有机会获得的隔离范围的唯一项目是编译，链接，控制器和模板项目。如果从字段集内移动的内部HTML成模板，它会按预期。

您也可以参考 http://angular-tips.com /博客/ 2014/03 / transclusion-和范围/ 了解实例和方法来测试这一点。

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重复不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！