將指令綁定到控制器屬性

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屬性 ，而不是在要重新出現時設置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>