$ scope.myVariable未在控制器中更新angular-ui bootstrap模式

Question

在我看来，我有一个输入，一个跨度和一个按钮，如下所示：

<script type="text/ng-template" id="myTemplate.html">
  <input type="text" ng-model="phoneNumber">
  <span>{{ phoneNumber}}</span>
  <input type="button" ng-click="click()">
</script>

在文本框中输入内容时，span的内容会按预期更新。但是当单击按钮时，phoneNumber尚未在控制器内更新：

app.controller('myPopopCtrl', ['$scope', '$modalInstance',
  function ($scope, $modalInstance) {
      $scope.phoneNumber= '';    

      $scope.click = function() {
        alert($scope.phoneNumber); // alerts only ''
      };

你是否有一些新的错误，你可以用角度来做错，这会让控件内的$scope内的东西没有更新？

我需要注意angular-ui modal是否存在一些范围问题？

修改

好像phoneNumber在2个范围内创建。有一次在蓝色箭头的范围内，其中phoneNumber: ''在红色箭头的子范围内有一次。视图使用子范围中的phoneNumber，控制器使用父范围中的phoneNumber ...

为什么要创建两个范围？

Answer 1

ng-include创建了一个新范围。所以传递一个对象而不是字符串

$scope.phone={number:null}

然后模板看起来像

<script type="text/ng-template" id="myTemplate.html">
  <input type="text" ng-model="phone.number">
  <span>{{ phone.number}}</span>
  <input type="button" ng-click="click()">
</script>

请查看此wiki以了解原型继承的问题。

Answer 2

有同样的问题，经过几次实验，我已经决定写作了

<input type="text" ng-model="$parent.phoneNumber">

这种方式输入绑定到蓝色范围，这正是您想要的。

其他方法是使用true-ish值初始化phoneNumber。试试$scope.phoneNumber= '123'; - 对我来说很好。

Angular似乎走在范围树中寻找要绑定的属性。如果找不到任何东西 - 它会绑定到你的照片中最内部的范围，红色范围。 正如其他答案所暗示的那样 - 这个红色范围是由ng-include创建的，作为控制器$ scope的子项。