Question

我正在尝试按下按钮点击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'"时，为什么它不起作用？

Answer 1

那么，

每个角度指令都会创建新范围

在下面的代码中

<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 的值会在按钮点击时更新。但 ng-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>

在控制器中定义 x ，就像这样。

$scope.x = {showHide:false}

编辑 -

在你的第一个woking 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>

ng-click不使用ng-if angularjs

1 个答案: