指令范围变量不适用于ng-show [英] Directive scope variable not working with ng-show
问题描述
我有一个使用指令的"home"控制器.我希望能够根据控制器中变量的值在指令模板中显示/隐藏按钮.
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.
这是我的指令的样子:
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,则按钮将在模板中显示:>
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>
运行此代码时,实际上可以看到传递给showLockIcon模板变量的值是正确的,但是指令模板中具有ng-show的元素将不起作用.这意味着当我将其传递为false值时,该按钮仍然可见.
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.
有什么想法吗?
此外,如果我在家庭控制器中更改canPredictionsBePosted变量的值,则模板中showLockIcon的值不会更新.我怎样才能使它正常工作?
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.
推荐答案
您需要进行两项更改.
1)将=
用于showLockIcon
,如下所示:
1) Use =
for showLockIcon
like below:
scope: {
pageTitle: "@",
showLockIcon: "="
}
2)删除show-lock-icon="{{canPredictionsBePosted}}"
<gol-navbar page-title="{{matchWeek}}"
show-lock-icon="canPredictionsBePosted">
</gol-navbar>
这篇关于指令范围变量不适用于ng-show的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!