$ 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模式是否存在一些范围问题？

编辑:

它似乎是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以了解原型继承的问题.