ng-click不适用于ng-if angularjs

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-if div之外无法访问x的新值，因为它在该作用域内是本地类型，并且是原始类型。 由于此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}

编辑-

在您的第一个唤醒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>