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-template：

<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中关于血腥细节的精彩解释。

ngDialog范围变量未更新

1 个答案: