Question

我创建了一个plnkr来演示我试图解决的问题。单击plnkr中的链接时，您将看到一个文本字段。此文本字段与ng-model绑定到myCtrl.foo，并且该控制器是$ watch，查看控制器的foo属性，然后将$ scope.num设置为随机数。您会注意到即使观察者明显正在发射（通过console.log），随机数也不会改变。

http://plnkr.co/edit/wpFPFeRC6CFFjLOa9QQw

任何人都可以解释为什么这不起作用，我能做些什么来解决它？

Answer 1

以下是发生的事情

定义路线时：

app.config(function ($stateProvider) {   $stateProvider
    .state('items', {
      url: '/items/:item_id',
      views: {
        'my-view': {
          controller: 'myController as myCtrl',
          templateUrl: 'my-view.html'
        },
        'main@': {
          controller: 'myController',
          templateUrl: 'main.html'
        },
      }
    })
});

你分配2个不同的视图来使用同一个控制器，这是好的，但Angular中的控制器不是单例。它是一个构造函数。这意味着两个控制器（及其范围）将不是同一个实例，而是两个不同的实例。

因此，视图1中的控制器和范围将与视图2中的控制器和范围不同。

控制器将使用不同的范围实例化两次，因此在视图1范围内所做的更改将不会反映在视图2范围内所做的更改（因为它们具有不同的范围）。

如果将以下行添加到控制器，则可以看到此信息：

app.controller('myController', function($scope) {
  console.log('myController scope id: ' + $scope.$id);
  console.dir($scope);
  // Your code here
});

日志将显示：

myController scope id: 003
myController scope id: 004

可能的解决方案

避免这种情况归结为个人偏好。以下是一些有效的选项：

使用事件在范围之间进行通信，并在num更新时发送事件
使用服务集中存储num
将num存储在$ rootScope

希望有所帮助！

Answer 2

这是有效的：http://plnkr.co/edit/tagldRNsgLXUhoGfZ2Un?p=preview

做了两件事，首先将所有原始绑定分配给一个名为test的对象。你可以在这里看到为什么最好这样做：https://egghead.io/lessons/angularjs-the-dot

其次，将控制器放在视图周围以确保它们共享一个范围并将其从ui-router中拉出来（因为我对ui-router及其所做的任何魔术几乎一无所知）

角度不更新的双向绑定

2 个答案:

以下是发生的事情

可能的解决方案