Angularjs:ui路由嵌套状态下的绑定不起作用

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);
}

我的寄存器中有这个。两个模板：

<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输入字段，但我无法这样做，因为该变量似乎不会影响我的模板。

如果我把我的控制器代码放在registerWoCtrl中，那么它就可以正常工作。如何使用单个控制器（父控制器）实现此功能？

谢谢！

Answer 1

这是一个未能使用ng模型黄金经验法则的经典案例：

在你的ng模型表达式中总是有一个"."

如果将newStudy存储为registerCtrl中$scope上对象的属性，它将正常工作。

例如

在寄存器Ctrl:中

$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>

一个可能更好的选择是使用controller as语法。查找它，它将有助于消除这些类型的错误，因为您将在ng模型表达式中引用registerCtrl.newStudy，而不仅仅是newStudy。