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

嗯，

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