javascript - ngDialog 范围变量未更新

Question

我对 AngularJs 和 ngDialog 都很陌生，并且无法让绑定(bind)在 ngDialog 模式和 Controller 之间工作。我通过指定 {scope: $scope } 将 Controller 的作用域注入(inject)到模态中，并且我可以访问 Controller 中定义的方法，但与 Controller 中定义的模型的绑定(bind)无法正常运行。

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

这是 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 创建一个新的子作用域。

新作用域继承其父作用域的属性(通过原型(prototype)继承)。当您将模型值存储在基元(字符串、数字、 bool 值)而不是对象中时，就会出现这样的问题。

由于原型(prototype)继承，子作用域中继承的字符串值将隐藏父作用域中的值。例如。您更改了子级中的值，但父级没有注意到。

这就是为什么 Angular 开发人员建议您“在模型中加一个点”。将模型存储在一个对象中，该对象可以在原型(prototype)继承中保留下来。

因此，创建一个包含所有模型值(您在 HTML 中绑定(bind)到的)的对象:

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

然后使用 ng-model 绑定(bind)到它们(使用点!):

ng-model="step1Data.name"

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