Fatal编程技术网
  • javascript/
  • Javascript 在一个div标记中使用多个AngularJS指令

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

javascript html angularjs

Javascript 在一个div标记中使用多个AngularJS指令,javascript,html,angularjs,Javascript,Html,Angularjs,我无法在同一个div标记中使用多个指令。以下html不显示模块提供的产品名称 <!DOCTYPE html> <html ng-app="gemStore"> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> </head>

我无法在同一个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>
将多个指令放在一个div上不是问题。这是我的一个应用程序中的一段代码，使用了ng click和ng class：

<a href="" class="listItems" ng-click="selectPost($index)" ng-class="{disabledLink: !post.available}">
你的问题是你是用控制器做的，我不确定ng控制器指令是如何工作的，但是你实际上是在为第一个控制器列表中的每一行声明一个不同的控制器实例。我不知道这怎么会不会变成一个疯狂的无限循环。但本质上，不要在ng repeat中声明控制器。除非你在控制器列表中循环

编辑：
丹尼尔在解决这个问题上比我做得好得多。ng repeat为列表中的每个项目创建一个html元素。但是，控制器尚未初始化，因此没有从中获取列表的范围，因此没有要绘制的元素，也没有创建控制器。通过进一步向上放置ng controller 1元素，创建了列表，并且有一个包含列表的范围，ng repeat可以使用该范围来绘制项目。

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

指令按优先级顺序编译并链接到在低优先级指令之前执行的高优先级指令

ng控制器的优先级为0，ng repeat的优先级为1000，因此首先编译并链接ng repeat

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

根据文件：

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

[编辑]

显然，ng控制器的正确优先级与之间存在差异。代码使用的优先级为500，但文档中提到它的优先级为0。

您可以在同一个DOM节点上使用多个指令。 您遇到的问题与
$compile
优先级以及
ng repeat
的功能有关

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

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

因此，在您的代码中，
ng控制器
从未被编译（“执行”）

此外，如果未编译
ng controller
，则
ng repeat
没有要处理的
$scope
，则
$digest
循环将没有任何作用。
你可能会认为
store
是未定义的，
store.products
也是未定义的，但你错了。如果是这样的话，你会看到很多“试图访问未定义对象“store”上的属性“products”，但你没有，因为
ng repeat
中的代码从未执行过。

如果这会导致此类灾难，应该有一些文档警告这种用法，对吗？我怎么找不到与此相关的任何信息？它不会创建重复的
ng controller
指令。它甚至不执行
ng repeat
。您也不能使用
ng repeat
在控制器列表中循环。看我的答案。是的，你的答案好多了。我会回到我的盒子里：（
ngController
的优先级为500:我猜你的意思是“任何优先级较低的指令”。感谢Sergiu的更正。根据angular（v1.3）的最新文档，ng repeat以优先级1000执行：！完全正确。因此，将不会执行优先级较低的指令。根据ng controller的最新angular文档，它以优先级0执行：谢谢，我遇到了相同的问题。这很有帮助 
(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" },
    ];


})();

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

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).