Div 控制器中的按钮不会隐藏 AngularJS

Question

我是 AngularJS 的新手，我试图在单击按钮时隐藏 div。在我将按钮放入我试图隐藏的 div 之前，我所做的工作正常（按钮使用不同的控制器）。从控制器中取出时，该按钮按预期工作，因此我认为这是范围问题。任何帮助将不胜感激。

<form action="" name="signUpForm" class="heroForm" >
      <div ng-hide="signUpB">
            <span id="signUpFormA">
                  <input required type="email" /> 
                  <input required type="password"/>
                  <span ng-controller="checkEmailCtrl">
                        <input type="button" ng-click="signUpB=true">
                  </span>
            </span>
      </div>
      <div ng-show="signUpB">
            <span id="signUpFormB">
                  <input required type="text">
                  <input required type="text">
                  <input type="submit">
            <span>
      </div>
</form>

Answer 1

ng-controller 创建自己的作用域。因此，在 ng-click="signUpB=true" 内，您正在修改此新范围内的 signUpB。

您可以通过使用一个对象来保存 signUpB 的状态来解决这个问题。基本上，将所有出现的 signUpB 替换为 state.signUpB。并且，在外部控制器的范围内定义状态对象。

$scope.state = {signUpB: false // defaults to false}

更好的方法是使用 controllerAs 语法。假设您的外部控制器是 OuterController。你定义为

ng-controller="OuterController as outerCtrl"

并且

将所有 signUpB 替换为 outerCtrl.signUpB 以确保您是 using/modifying outerCtrl 的模型。

Answer 2

是的，您正在 checkEmailCtrl 的范围内设置 signUpB=true。你可以这样做：

<form action="" name="signUpForm" class="heroForm" ng-init="signUpB={value:false}">
      <div ng-hide="signUpB.value">
            <span id="signUpFormA">
                  <input required type="email" /> 
                  <input required type="password"/>
                  <span ng-controller="checkEmailCtrl">
                        <input type="button" ng-click="signUpB.value=true">
                  </span>
            </span>
      </div>
      <div ng-show="signUpB.value">
            <span id="signUpFormB">
                  <input required type="text">
                  <input required type="text">
                  <input type="submit">
            <span>
      </div>
</form>

通过将 signUpB 包装在对象中，signUpB.value=true 语句将在外部作用域中查找 signUpB 对象，并将其设置为 value 属性为 true，将不会对 checkEmailCtrl 的范围进行任何修改。

Div 控制器中的按钮不会隐藏 AngularJS

Div won't hide when button in controller AngularJS

angularjs

angularjs-scope

angularjs-ng-show