15

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

<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 模态是否存在一些 $scope 问题？

编辑：

似乎是phoneNumber在 2 个范围内创建的。一次在蓝色箭头的范围内，phoneNumber: ''一次在红色箭头的子范围内。视图phoneNumber在子作用域中使用，控制器phoneNumber在父作用域中使用...

在此处输入图像描述

为什么要创建两个范围？

4

2 回答 2

15

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以了解原型继承的问题。

于 2013-10-16T12:22:42.420 回答
1

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

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

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

另一种方法是用一个真实的值初始化 phoneNumber。尝试$scope.phoneNumber= '123';- 对我来说效果很好。

Angular 似乎沿着作用域树向上寻找要绑定的属性。如果没有找到 - 它会绑定到最里面的范围，即图片中的红色范围。正如其他答案所暗示的那样 - 这个红色范围是由 ng-include 创建的，作为控制器 $scope 的子级。

于 2014-02-02T12:08:44.947 回答