Question

Angular的新手：

我想有条件地隐藏我的NavBar指令，所以我添加了一个属性如下：

 export function NavbarDirective() {

     'ngInject';

     let directive = {
         restrict: 'E',
         templateUrl: 'app/components/navbar/navbar.html',
         scope: {
             hidden: "="
         },
         controller: NavbarController,
         controllerAs: 'navBarVm',
         bindToController: true
     };

     return directive;
 }

 class NavbarController {

     constructor() {
         'ngInject';
     }
 }

使用如下：

<lb-navbar hidden="main.loading"></lb-navbar>

但是当main.loading变为false时，NavBar不再出现。我怎样才能解决这个问题？

现在，我只是按照以下方式包含在div中：

<div ng-hide="vm.loading"> <lb-navbar hidden="main.loading"></lb-navbar> </div>

。。但是，我正在寻找通过引用创建“通过”的正确方法。在指令中绑定。

Answer 1

这不是真正的棱角分明问题。

由于您使用hidden来隐藏元素，因此需要删除指令的hidden attr ，而不是在想要重新显示时设置hidden="false"它。

<div hidden="true">1.div with hidden="true" (you cant see me)</div>

<br />

<div hidden="false">2.div with hidden="false" (you cant see me)</div>

<br />

<div>3.div without hidden attr (you can only see me)</div>

对于您的情况，有两种解决方案，

1.只需使用ng-hide替换hidden：

<lb-navbar ng-hide="main.loading"></lb-navbar>

2.另一个名称而不是hidden来控制可见性：

您的指示：

let directive = {
     restrict: 'E',
     templateUrl: 'app/components/navbar/navbar.html',
     scope: {
         myhidden: "="
     },
     controller: NavbarController,
     controllerAs: 'navBarVm',
     bindToController: true,
     link:function(scope,element,attrs){
         scope.$watch('myhidden',function(nv,ov){
             nv ? element.hide() : element.show();
             return false;
         });
     }
 };

标记：

<lb-navbar myhidden="main.loading"></lb-navbar>

将指令绑定到控制器属性

1 个答案: