在一个div标签使用多个AngularJS指令 [英] Using multiple AngularJS directives in one div tag
问题描述
我无法在同一个div标签使用多个指令。下面的html不显示产品的名称，该模块供应
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=gemStore＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =CSS / bootstrap.min.css/＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG控制器=StoreController为商店NG-重复=，在store.products亲＆GT;
＆LT; H1＆GT; {{pro.name}}＆LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT;脚本的src ='脚本/ angular.min.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
但是，如果我在不同的div标签添加NG-控制器（见下文），我能看到的产品。这背后的原因。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=gemStore＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =CSS / bootstrap.min.css/＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG控制器=StoreController为专卖店＆GT;
＆LT; DIV NG重复=亲中store.products＆GT;
＆LT; H1＆GT; {{pro.name}}＆LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本的src ='脚本/ angular.min.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我也搜索一下在一个div标签使用多个指令，但在寻找的任何信息不成功。
这是一个通过限制施加AngularJS？
以下是app.js的内容
（函数（）{
VAR应用= angular.module（'gemStore'，[]）;
app.controller（'StoreController'，函数（）{
this.products =宝石;
}）; VAR宝石= [
{名称：'阿尔文'，价格：200，说明：检查我的名字}，
{名称：'阿尔文'，价格：200，说明：检查我的名字}，
{名称：'阿尔文'，价格：200，说明：检查我的名字}，
];
}）（）;
您可以在同一个DOM节点上使用多个指令。
您正在运行到是与 $问题编译优先级的和的东西 NG-重复确实。
首先，你必须明白，有一个明确的算法，它定义了指令相同的DOM节点上被编译的方式。有一个优先级 parameter即默认为 0 。指令是根据此参数编译，最高到最低。 NG-重复为1000，而优先级 NG-控制器有500所以
其次，你需要知道的如何的 NG-重复的作品。如果你读了源，您看到它使用了端子参数。该参数告诉AngularJS它应该的不的编译任何指示低优先级。
因此，在code， NG-控制器从不编译（运行）。
此外，如果 NG-控制器没有然后编译 NG-重复不具有 $范围上下工夫，在 $消化循环将不会有任何瓜葛。
你会认为商店是不确定的，所以是 store.products ，但是你错了。如果是这样的话你会看到很多的访问属性产品未定义的对象'商店'的的，但你不知道，因为code在 NG-重复永远不会执行。
I am unable to use multiple directives in the same div tag. The following html does not display the product names that the module supplies
<!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>
But if I add the ng-controller in a different div tag(see below) I am able to see the products. What is the reason behind this.
<!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>
I did search about using multiple directives in a single div tag but was unsuccessful in finding any information. Is this a restriction imposed by AngularJS?
Following is the contents of 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" },
];
})();
You can use multiple directives on the same DOM node.
The issue you are running into is related to $compile priority and what ng-repeat does.
First of all you must understand that there's a clear algorithm that defines the way in which directives on the same DOM node are compiled. There's a priority parameter that defaults to 0. Directives are compiled based on this parameter, highest to lowest. ng-repeat has a priority of 1000 while ng-controller has a priority of 500. So ng-repeat is compiled first.
Second you need to know how ng-repeat works. If you read the sources you see that it uses the terminal parameter. That parameter tells AngularJS that it should not compile any directives with lower priorities.
Thus, in your code, ng-controller is never compiled ("executed").
Further, if ng-controller is not compiled then ng-repeat does not have a $scope to work on, the $digest loop won't have anything to do.
You'd be tempted to think store is undefined, and so is store.products, but you'd be wrong. If that were the case you'd see a lot of "Trying to access property 'products' on undefined object 'store'", but you don't because the code in ng-repeat is never executed.
这篇关于在一个div标签使用多个AngularJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
