在应用程序导航中单击ui-view
链接后,每个链接下方都会显示一个包含内容的下拉菜单。
HTML:
<div class="sc-dash-header">
<ul>
<li>
<a class="navbar-brand" show-nav-popup href="">download</a>
<div id="nav-download-progress" class="dash-hdr-popup" ng-show="showPopup">
<div ui-view="hdr-download-progress"></div>
</div>
</li>
<li>
<a class="navbar-brand" show-nav-popup href="">add</a>
<div id="nav-add" class="dash-hdr-popup" ng-show="showPopup">
<div ui-view="hdr-add-content"></div>
</div>
</li>
<li>
<a class="navbar-brand" show-nav-popup href="">enter pin</a>
<div id="nav-unlock" class="dash-hdr-popup" ng-show="showPopup">
<div ui-view="hdr-unlock"></div>
</div>
</li>
</ul>
</div>
ng-show
当$scope.showPopup
设置为true时,我包含了一个用于打开下拉菜单的属性。
为此,我创建了一个自定义指令,该指令带有一个名为的on click show-nav-popup
。
JS:
.directive('showNavPopup', function () {
return {
restrict: 'A',
// scope: {},
link: function(scope, el, attrs) {
el.on('click', function(){
scope.$apply(function () {
scope.showPopup = true;
});
console.log(scope);
});
}
};
});
上面的方法有效,但是下拉列表在每个元素上打开。
问题:我需要隔离范围,因此在每次单击时,只会显示相应的下拉列表。我取消了这条线的评论// scope: {}
-但这行不通..
AngularJS n00b在这里-任何帮助将不胜感激
在这种情况下使用隔离范围无法解决问题。尽管有很多方法可以实现您想要的。其中之一是为每个show-popup-nav
ID分配一个ID,将其$scope.showPopup
转换为一个数组,并为每个ID保留单独的true / false。然后对于每个ng-show,您查看与每个ID对应的索引,以获取true / false值。
我在那个家伙的Plunker上进行了编码,如您所愿地工作:http ://plnkr.co/edit/CSikLIiuPNT9dfsfZfLk
编辑:我应该说,您可以使用隔离范围来解决此问题,但这将需要对DOM进行大量更改,因为该ng-show
指令是您的同级对象show-popup-nav
,而不是子级。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句