指令范围变量不适用于 ng-show [英] Directive scope variable not working with ng-show

问题描述

我有一个使用指令的home"控制器.我希望能够根据控制器中变量的值在指令模板中显示/隐藏按钮.

这是我的指令的样子:

angular.module("goleadoresApp").directive("golNavbar", [golNavbar]);函数 golNavbar() {返回 {限制:EA"，templateUrl: "views/templates/golNavbar.html",范围: {页面标题: "@"，显示锁定图标:@"}};}

还有我的模板:

<h1 class="title"><i class="gol-logo-icon icon ion-ios-football"></i><span ng-bind="pageTitle"></span><!--出于测试目的:此变量呈现为 false，但是，下面一行中的 ng-show 不起作用-->{{showLockIcon}}<!--ng-show 不起作用.即使 showLockIcon 为 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>

在我看来，我将使用模板并向其传递一个控制器变量 (canPredictionsBePosted)，该变量包含 true 或 false 的值，我希望如果为 true，则按钮将显示在模板中:

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

在运行这段代码时，我实际上可以看到传递给 showLockIcon 模板变量的值是正确的，但是指令模板中的元素(具有 ng-show)不起作用.这意味着当我传递给它一个 false 值时，按钮仍然可见.

有什么想法吗?

此外，如果我更改主控制器中 canPredictionsBePosted 变量的值，模板中的 showLockIcon 值不会更新.我怎样才能让它发挥作用?

提前致谢，我是指令的新手，所以感谢所有帮助.

解决方案

您需要进行两项更改.

1) 对 showLockIcon 使用 =，如下所示:

 范围:{页面标题: "@"，显示锁定图标:="}

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

中canPredictionsBePosted周围的花括号

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

I have a "home" controller that uses a directive. I want to be able to show/hide a button in the directive template depending on the value of a variable in the controller.

This is what my directive looks like:

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

And my template:

<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>

From my view, I'll use the template and pass it a controller variable (canPredictionsBePosted) that holds a value of true or false, and for which I expect that, if true, button will show in the template:

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

When running this code, I can actually see that the value passed to showLockIcon template variable is correct, but the element in the directive template, which has the ng-show, won't work. That means that when I pass it a value of false, the button is still visible.

Any ideas?

Furthermore, if I change the value of the canPredictionsBePosted variable in my home controller, the value of showLockIcon in the template doesn't get updated. How could I get this to work?

Thanks in advance, I'm new to directives, so all help is appreciated.

解决方案

You need to make two changes.

1) Use = for showLockIcon like below:

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

2) Remove the curly braces around canPredictionsBePosted in show-lock-icon="{{canPredictionsBePosted}}"

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

这篇关于指令范围变量不适用于 ng-show的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！