指令范围变量不适用于 ng-show

Question

我有一个使用指令的 "home" 控制器。我希望能够根据控制器中变量的值 show/hide 指令模板中的按钮。

这是我的指令的样子：

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

您需要进行两项更改。

1) 将 = 用于 showLockIcon，如下所示：

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

2) 去掉show-lock-icon="{{canPredictionsBePosted}}"

中canPredictionsBePosted两边的大括号

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

指令范围变量不适用于 ng-show

Directive scope variable not working with ng-show

angularjs

angularjs-directive