角度指令無法訪問范圍
[英]Angular Directive cannot access scope
問題描述
我在 angular js 和你的幫助方面沒有很好的經驗！
我正在嘗試為基於角度的網站創建選項卡導航。
這是我的 html：
<body ng-app = "app">
<div class="bottom-content-container">
<form class = "tab-nav">
<tab-nav nav = "popular"></tab-nav>
<tab-nav nav = "recent"></tab-nav>
</form>
<div class="tab-content" ng-switch = "tab">
<div ng-switch-when = "popular">
Popular Images
</div>
<div ng-switch-when = "recent">
Recent Images
</div>
</div>
</div>
</body>
這是js：
var app = angular.module('app', []);
app.directive('tabNav', function () {
return {
template : '<label> <input type="radio" ng-model="tab" value="{{nav}}" name = "tabnav" /><span>{{nav}}</span></label>',
replace:true,
scope:{
nav: '@'
}
};
});
事情可能是我弄亂了范圍，並且指令沒有更改“tab”變量，所以什么也沒有發生。
這是jsbin
提前致謝！
4 個解決方案
解決方案1
2 2016-05-05 15:01:16
我做了一個jsbin 。
在指令范圍 @ 用於綁定到屬性，因為您的指令應該設置一個將從外部讀取的選定值，您需要使用 =。 然后我將所有內容都包裝在 ctrl 中以保存此選定值，以便您的內容可以使用它來顯示選項卡。
解決方案2
0 已采納 2016-05-05 15:05:48
解決方案3
0 2016-05-05 15:08:29
<tab-nav ng-click="tab='popular'" nav = "popular"></tab-nav>
<tab-nav ng-click="tab='recent'" nav = "recent"></tab-nav>
解決方案4
0 2016-05-05 15:11:49
另一種解決方案是使用$parent ：
app.directive('tabNav', function () {
return {
template : '<label> <input type="radio" ng-model="$parent.tab" value="{{nav}}" name = "tabnav" /><span>{{nav}}</span></label>',
replace:true,
scope:{
nav: '@',
tab : '='
}
};
});
還要注意value屬性是如何綁定的。
如何在指令鏈接中訪問angular $ scope控制器？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.