ngDialog 范围变量未更新

Question

我是 AngularJs 和 ngDialog 的新手，我无法让我的绑定在 ngDialog 模式和我的控制器之间工作。我通过指定 { scope: $scope } 将控制器的作用域注入到模态中，并且我可以访问控制器中定义的方法，但是控制器中定义的模型绑定无法正常运行。

我正在尝试使用模式来允许用户向组织添加地址。

这里是 main.js

angular.module('wizardApp')
  .controller('MainCtrl', ['$scope', 'ngDialog', MainCtrl]);

function MainCtrl($scope, ngDialog) {
  $scope.hide_wizard_button = false;
  $scope.open_wizard = function () {
    $scope.hide_wizard_button = true;
    ngDialog.open({
      template: 'wizard',
      controller: 'wizardCtrl',
      scope: $scope
   })
 }
}

angular.module('wizardApp')
    .controller('wizardCtrl', ['$scope', wizardCtrl]);
function wizardCtrl($scope){
  $scope.step = 1;
  $scope.name = null;
  $scope.phone_number = null;
  $scope.email_address = null;
  $scope.password = null;
  $scope.step_forward = function(){
    if ($scope.step === 1){
      if(validate_name($scope.name) &&     validate_phone_number($scope.phone_number) && validate_address($scope.address)){
        $scope.step++;
      }
    }
    if ($scope.step == 2){
       if(validate_email($scope.email_address) &&   validate_password($scope.password)){
        $scope.step++;
      }
    }
  };

以下是我的 ng 模板：

<script type="text/ng-template" id="wizard">
  <form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
      <li ng-class="{true: 'active'}[step==1]">Personal Details</li>
      <li ng-class="{true: 'active'}[step==2]">Social Profiles</li>
      <li ng-class="{true: 'active'}[step==3]">Personal Details</li>
    </ul>
    <!-- fieldsets -->
    <fieldset ng-if="step == 1">
      <h2 class="fs-title">Enter Your personal Details</h2>

      <h3 class="fs-subtitle">This is step 1</h3>
      <input type="text" placeholder="Name" ng-model="name"/>
      <input type="text" placeholder="Phone Number" ng-model="phone_number"/>
      <input type="text" placeholder="Address" ng-model="address"/>
      <input type="button" class="next action-button" value="Next" ng-click="step_forward()"/>
    </fieldset>
    <fieldset ng-if="step == 2">
      <h2 class="fs-title">Email Verification</h2>

      <h3 class="fs-subtitle">Your Email Address and password</h3>
      <input type="text" name="email" placeholder="Email Address"/>
      <input type="password" name="password" placeholder="Password"/>
      <input type="button" name="previous" class="previous action-button" value="Previous" ng-click="step_back()"/>
      <input type="button" name="next" class="next action-button" value="Next" ng-click="step_forward()"/>
    </fieldset>
    <fieldset ng-if="step == 3">
      <h2 class="fs-title">Thank You for signing up!</h2>
    </fieldset>
  </form>
</script>

错误是无法读取 null 的属性，这意味着 $scope.name 没有得到更新。

Answer 1

看起来问题与模板中的 ng-if 指令有关。 ng-if 创建一个新的子作用域。

新作用域继承其父作用域的属性（通过原型继承）。当您将模型值存储在基元（字符串、数字、布尔值）而不是对象中时，就会出现类似的问题。

由于原型继承，子作用域中继承的字符串值会影响父作用域中的值。例如。你改变了孩子的价值，但父母没有注意到它。

这就是为什么 Angular 开发人员建议您“在模型中添加一个点”。将您的模型存储在一个对象中，该对象可以在原型继承中继续存在。

所以创建一个包含所有模型值的对象（在 HTML 中绑定）：

$scope.step1Data = { name: null, phone: null }; // etc.

然后使用ng-model 绑定到它们（使用点！）：

ng-model="step1Data.name"

请阅读this answer 中的精彩解释，了解血淋淋的细节。