ng-showで動作しないディレクティブスコープ変数

Question

ディレクティブを使用する "ホーム"コントローラがあります。コントローラ内の変数の値に応じて、ディレクティブテンプレートのボタンを表示/非表示にしたいと考えています。

これは私のディレクティブは次のようになります。

angular.module("goleadoresApp").directive("golNavbar", [golNavbar]); 
function golNavbar() { 
    return { 
     restrict: "EA", 
     templateUrl: "views/templates/golNavbar.html", 
     scope: { 
      pageTitle: "@", 
      showLockIcon: "@" 
     } 
    }; 
} 

そして、私のテンプレート：私のビューから

<div class="bar bar-header bar-balanced"> 
    <h1 class="title"> 
     <i class="gol-logo-icon icon ion-ios-football"></i> 
     <span ng-bind="pageTitle"></span> 
    </h1> 
    <!--For testing purposes: This variable renders as false, however, ng-show in line below doesn't work-->  
    {{showLockIcon}} 
    <!--ng-show won't work. Element would still be visible even if showLockIcon is false--> 
    <a class="button icon ion-locked pull-right second-right-button" 
     ng-show="showLockIcon"></a> 
    <a class="button icon ion-help-circled" href="#/help"></a> 
</div> 

、私はテンプレートを使用して、コントローラ変数（canPredictionsBePosted）を渡していることでしょうtrueまたはfalseの値を保持していますが、trueの場合はテンプレートにボタンが表示されます：

<gol-navbar page-title="{{matchWeek}}" 
      show-lock-icon="{{canPredictionsBePosted}}""> 
</gol-navbar> 

このコードを実行すると、実際にshowLockIconテンプレート変数に渡された値が正しいことがわかりますが、ng-showを持つディレクティブテンプレートの要素は機能しません。つまり、falseの値を渡すと、ボタンはまだ表示されます。

アイデア？

さらに、私のホームコントローラのcanPredictionsBePosted変数の値を変更すると、テンプレート内のshowLockIconの値が更新されません。どのように私はこれを動作させることができますか？

私はディレクティブが新しく、すべての助けに感謝します。

Answer 1

2つの変更が必要です。

scope: { 
     pageTitle: "@", 
     showLockIcon: "=" 
    } 

2）show-lock-icon="{{canPredictionsBePosted}}"

<gol-navbar page-title="{{matchWeek}}" 
      show-lock-icon="canPredictionsBePosted"> 
</gol-navbar>