javascript - 将指令绑定(bind)到 Controller 属性

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，导航栏不会重新出现。我怎样才能解决这个问题？

现在，我只是将其包装在 div 中，如下所示:

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

。 。但是，我正在寻找在指令中创建“按引用传递”绑定(bind)的正确方法。

Answer 1

这不是一个真正的 Angular 问题。

Since you've use hidden to hide element, need to remove hidden attr of your directive, rather than set hidden="false" when you want to reappear it.

<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.另一个名称而不是隐藏来控制可见性:

您的指令:

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>