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的状态来解决此问题。基本上，用state.signUpB替换所有signUpB事件。并且，在外部控制器的范围内定义状态对象。

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

更好的方法是使用 controllerAs 语法。让我们说你的外部控制器是OuterController。您将其定义为

ng-controller="OuterController as outerCtrl"

和

将所有signUpB替换为outerCtrl.signUpB，以确保您使用/修改outerCtrl的模型。

Answer 2

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

<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属性如果是，则不会对checkEmailCtrl的范围进行任何修改。

当控制器AngularJS

2 个答案: