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优先级和 ng-repeat的内容有关。

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

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

因此，在您的代码中，永远不会编译ng-controller（＆＃34;已执行＆＃34;）。

此外，如果未编译ng-controller，则ng-repeat没有$scope可供使用，$digest循环无法执行任何操作。您会想到store未定义，store.products也是如此，但您错了。如果是这种情况，您会看到很多＆＃34;尝试访问产品＆＃39;产品＆＃39;在未定义的对象＆＃39; store＆＃39;＆＃34; 上，但您不会因为ng-repeat中的代码永远不会被执行。

Answer 2

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

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

你的问题是你是用控制器做的，我不确定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）。

<强> [编辑]

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

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

4 个答案: