角度指令无法访问范围
[英]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.