绑定指令控制器属性

Question

新建角位置：

我想有条件地隐藏我的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为假，设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.Just使用ng-hide更换hidden：

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

2.Another名称，而不是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>