在一個div標簽中使用多個AngularJS指令
[英]Using multiple AngularJS directives in one div tag
問題描述
我無法在同一個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" },
];
})();
4 個解決方案
解決方案1
6 已采納 2014-06-24 12:48:02
您可以在同一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的代碼永遠不會被執行。
解決方案2
1 2014-06-24 12:36:52
將多個指令放在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可以用來繪制項目。
解決方案3
1 2014-06-24 12:41:24
你想要做的是不可能的。 ng-repeat會正常創建特定標記的多個實例。 在你的例子中，它將創建幾個div，每個div創建一個單獨的控制器。 我沒有這方面的來源，但我想$ scope只在控制器標簽之間有效。 因此，您的ng-repeat參數不會指向您的產品列表，而是指向更高的范圍。 由於此范圍內沒有條目，因此ng-repeat沒有任何內容可供顯示。
解決方案4
1 2014-06-24 12:47:45
指令按優先級順序編譯和鏈接，優先級較低的指令在較低優先級指令之前執行。
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。
使用AngularJS指令更改div內div的滾動位置
[英]Changing the scroll position of a div inside a div using AngularJS directives
將多個自定義指令應用於AngularJS中的相同HTML標簽
[英]Applying multiple custom directives to the same HTML tag in AngularJS
Angularjs多指令[gridsection，gridsection]要求模板： <div gridsection=“”>
[英]Angularjs Multiple directives [gridsection, gridsection] asking for template on: <div gridsection=“”>
Angularjs - 元素上的多個指令，其中一個是隔離范圍
[英]Angularjs - Multiple directives on element with one being isolate scope
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.