Question

我的应用配置中有状态：

 ...
 .state('register', {
    templateUrl: 'views/register/register.html',
    controller: "registerCtrl"
  })
  .state('register.step-one', {
    url: "/register.one",
    templateUrl: "views/register/register.one.html",
    controller: "registerOneCtrl"
  })
  .state('register.step-two', {
    url: "/register.two",
    templateUrl: "views/register/register.two.html",
    controller: "registerTwoCtrl"
  })

我的主控制器是 registerCtrl ：

$scope.studies = [];
$scope.newStudy = "dd";

$scope.addStudy = function (studyName) {
  $scope.studies.push({
    title: studyName
  });
  console.log($scope.newStudy); //This prints empty
  $scope.newStudy = "AAAAA"; //this doesn't seem to work :(
  console.log($scope.newStudy);
}

我在 register.two 模板中有这个：

<div class="container-fluid  margin-top-md">
  <input type="text" ng-model="newStudy"/>
  <i class="fa fa fa-plus-square" ng-click="addStudy(newStudy)"></i>
  <ul>
    <li ng-repeat="study in studies">
      <input type="text" ng-model="study.title"/>
    </li>
  </ul>
</div>

现在，这样做不正常，因为在添加一项研究后，我想更新我的newStudy输入字段，但是，我无法这样做，因为该变量似乎不会影响我的模板。

如果我将控制器代码放在registerTwoCtrl中，那么它可以正常工作。如何使用单个控制器（父控制器）完成此工作？

谢谢！

Answer 1

这是未能使用ng-model黄金法则的经典案例：

始终拥有＆＃34;。＆＃34;在您的ng模型表达式

如果您将newStudy作为对象的属性存储在$scope的{{1}}中，它将正常工作。

e.g。

在registerCtrl中：

registerCtrl

在模板中，将其更改为：

$scope.data = { newStudy: "AAAA" }; // instead of $scope.newStudy = "AAAA";

可能更好的选择是使用<div class="container-fluid margin-top-md"> <input type="text" ng-model="data.newStudy"/> <i class="fa fa fa-plus-square" ng-click="addStudy(data.newStudy)"></i> <ul> <li ng-repeat="study in studies"> <input type="text" ng-model="study.title"/> </li> </ul> </div>语法。查阅它，它将有助于消除这些类型的错误，因为您将在ng-model表达式中引用controller as而不仅仅registerCtrl.newStudy。

Angularjs：ui-routing嵌套状态中的绑定不起作用

1 个答案: