尽管被观看,角度ui-router中的命名视图仍未更新

Question

我有一个范围变量$scope.foo,我正在监视.它可以通过表单中的文本字段进行更新.

我有两个命名视图,A并B在我使用angular ui-router渲染的页面上.命名视图A具有文本表单字段,正在监视控制器中的更改ng-model="foo".当foo用户更改值时$scope.bar,它会ng-repeat在命名视图的指令中使用的控制器中更改另一个作用域变量(即数组)的值B.$scope.bar使用$scope.$watch控制器中的方法进行更改.

那我现在面临的问题是,当将foo改变我可以看到的变化bar上的命名视图A,但不是在命名视图B.

有人可以帮我解决这个问题吗？

编辑: 这是此问题的plunker.

Answer 1

有一个plunker,它应该表明您的方案正在运行.

该解决方案最重要的部分是:

• 仅按视图层次结构范围继承 (引用:)

请记住,只有嵌套状态的视图时,范围属性才会继承状态链.范围属性的继承与状态的嵌套以及与视图(模板)的嵌套有关的所有内容都无关.

完全有可能您有嵌套状态,其模板在您站点内的各种非嵌套位置填充ui-views.在这种情况下,您不能指望在子状态视图中访问父状态视图的范围变量.

让我再次表示它:一个scope继承去只能通过view嵌套.

有了它,我们可以创建这种状态定义:

$stateProvider
    .state('root', { 
        url: '/root',
        templateUrl: 'tpl.root.html',
        controller: 'RootCtrl',            // this root scope will be parent
    })
    .state('root.entity', {
        url: '/entity',
        views:{
            'A': {
                templateUrl: 'tpl.a.html',
                controller: 'ACtrl',        // scope is inherited from Root
            },
            'B': {
                templateUrl: 'tpl.b.html',
                controller: 'ACtrl',        // scope is inherited from Root
            }
        }
    })

因此,状态定义支持嵌套视图 - 让我们从中获利并将$scope.bar集合放入父级.然后,所有涉及的视图都可以访问相同的集合:

.controller('RootCtrl', function ($scope, $state) {
  $scope.bar = ['first', 'second', 'last'];

})
.controller('ACtrl', function ($scope, $state) {
  // *) note below
  $scope.foo = $scope.bar[0];
  $scope.$watch("foo", function(val){$scope.bar[0] = val; });
})
.controller('BCtrl', function ($scope, $state) {

})

*)注意:这里我们做1)设置从2)$ watch和3)设置回bar以跟随问题描述...但是如果数组包含对象,我们可以直接使用它们...没有它开销,但这是另一个故事......

检查这是如何工作的,并且视图A中的任何更改在B ... 中也是可见的,因为继承了对bar父$ scope中声明的数组的引用.