綁定指令控制器屬性

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>