$ 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 ''
      };

是否有一些你可以在angular中做出的newbe错误，这使得在控制器内的$scope上没有更新内容？

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

编辑：

似乎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的子代。