在一个div标签中使用多个AngularJS指令

Question

我无法在同一个div标签中使用多个指令。 以下html不显示模块提供的产品名称

<!DOCTYPE html>
<html ng-app="gemStore">
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div ng-controller="StoreController as store" ng-repeat="pro in store.products">
            <h1>{{pro.name}}</h1>
        </div>
        <script src='scripts/angular.min.js'></script>
        <script type="text/javascript" src="scripts/app.js"></script>
    </body>
</html>

但是如果我将ng-controller添加到不同的div标签中（见下文），我就能看到产品。 这背后的原因是什么？

<!DOCTYPE html>
<html ng-app="gemStore">
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div ng-controller="StoreController as store" >
            <div ng-repeat="pro in store.products">
                <h1>{{pro.name}}</h1>
            </div>
        </div>
        <script src='scripts/angular.min.js'></script>
        <script type="text/javascript" src="scripts/app.js"></script>
    </body>
</html>

我确实搜索了在单个div标签中使用多个指令，但未能成功找到任何信息。 这是AngularJS强加的限制吗？

以下是app.js的内容

(function() {
    var app = angular.module('gemStore', []);
    app.controller('StoreController', function() {
        this.products = gems;
    });

    var gems = [
        { name: 'Alwin', price: 200, description: "Checking my name" },
        { name: 'Alwin', price: 200, description: "Checking my name" },
        { name: 'Alwin', price: 200, description: "Checking my name" },
    ];


})();

Answer 1

您可以在同一DOM节点上使用多个指令。 您遇到的问题与$compile priority 和 ng-repeat 。

首先，您必须了解有一个明确的算法，它定义了编译同一DOM节点上的指令的方式。 有一个priority 参数，默认为0 。 指令是根据此参数编译的，从最高到最低。 ng-repeat的优先级为1000，而ng-controller的优先级为500.因此首先编译 ng-repeat 。

其次，你需要知道如何 ng-repeat的作品。 如果您阅读了源，则会看到它使用terminal参数。 该参数告诉它应该不低优先级编译任何指令AngularJS。

因此，在您的代码中， ng-controller永远不会被编译（“执行”）。

此外，如果没有编译ng-controller那么ng-repeat没有$scope可以工作， $digest循环将没有任何事情要做。 你会想到store是未定义的， store.products也是store.products ，但你错了。 如果是这种情况，你会在未定义的对象'store'上看到很多“试图访问属性'产品' ，但你没有，因为ng-repeat的代码永远不会被执行。

Answer 2

将多个指令放在div上不是问题。 这是来自我的应用程序的代码片段，使用ng-click和ng-class：

<a href="" class="listItems" ng-click="selectPost($index)" ng-class="{disabledLink: !post.available}">

您的问题是您使用Controller完成的，我不确定ng-controller指令是如何工作的，但您实际上是为第一个控制器列表中的每一行声明了一个不同的控制器实例。 这不是最终在一些疯狂的无限循环，我不知道。 但实质上，不要在ng-repeat中声明你的控制器。 除非你循环通过控制器列表！

编辑：丹尼尔比我更好地解决问题的路线。 ng-repeat为列表中的每个项创建一个html元素。 然而，控制器尚未初始化，因此无法获取列表，因此没有要绘制的元素，也没有创建控制器。 通过进一步放置ng-controller 1元素，创建了列表，并且有一个范围，包含一个列表，ng-repeat可以用来绘制项目。

Answer 3

你想要做的是不可能的。 ng-repeat会正常创建特定标记的多个实例。 在你的例子中，它将创建几个div，每个div创建一个单独的控制器。 我没有这方面的来源，但我想$ scope只在控制器标签之间有效。 因此，您的ng-repeat参数不会指向您的产品列表，而是指向更高的范围。 由于此范围内没有条目，因此ng-repeat没有任何内容可供显示。

Answer 4

指令按优先级顺序编译和链接，优先级较低的指令在较低优先级指令之前执行。

ng-controller的优先级为0，ng-repeat的优先级为1000，因此首先编译并链接ng-repeat。

如果两者都被编译，这不会导致问题。 但是，ng-repeat也使用终端属性定义。

根据角度文件：

 terminal: If set to true then the current priority will be the last set of directives which will execute (any directives at the current priority will still execute as the order of execution on same priority is undefined).

这意味着一旦编译了ng-repeat，就不会执行其他具有较低优先级的指令（例如ng-controller）。

[编辑]

显然，源代码和文档之间在ng-controller的正确优先级方面存在差异。 代码使用500的优先级，但文档提到它的优先级为0。

在一个div标签中使用多个AngularJS指令

问题描述

4 个解决方案

解决方案1
6 已采纳 2014-06-24 12:48:02

解决方案2
1 2014-06-24 12:36:52

解决方案3
1 2014-06-24 12:41:24

解决方案4
1 2014-06-24 12:47:45

在一个div标签中使用多个AngularJS指令

问题描述

4 个解决方案

解决方案1 6 已采纳 2014-06-24 12:48:02

解决方案2 1 2014-06-24 12:36:52

解决方案3 1 2014-06-24 12:41:24

解决方案4 1 2014-06-24 12:47:45

解决方案1
6 已采纳 2014-06-24 12:48:02

解决方案2
1 2014-06-24 12:36:52

解决方案3
1 2014-06-24 12:41:24

解决方案4
1 2014-06-24 12:47:45