我正在尝试在按钮单击时切换 div
,如下所示。
正在运行。
<div>
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
这不起作用。
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
为什么当我添加 ng-if="$state.current.url!='/splash'"
时它不起作用?
最佳答案
嗯,
每个 Angular Directive(指令)都会创建新的范围
在下面的代码中
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
ng-if指令创建新的范围。并在此范围内 x 的值在按钮单击时更新。但是 x 的新值无法在此 ng-if div 之外访问,因为它是本地的到该范围,它是原始类型。 由于这个x是原始类型,因此没有数据更新,因为引用不同。
您应该使用对象模型。
这是更新后的 HTML
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x.showHide = ! x.showHide'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x.showHide'>This is div</div>
像 Controller 中的这个一样定义x。
$scope.x = {showHide:false}
编辑-
在您的第一个工作 HTML 中,div 上没有指令。因此,这两个 DIV 都属于同一范围。因此,x 可以通过这两个 DIV 访问并更新值。
<div>
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
关于javascript - ng-click 不与 ng-if angularjs 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31138128/