Question

我在服务中定义了一个对象。我从控制器内部的kendo-ui treeview的select事件处理程序设置对象成员的值。

我在第二个视图中使用树视图包含此视图，并通过ng-include包含第二个控制器。我试图在这个“父”视图中显示服务对象的值。我可以看到ng-include控制器正在为服务中的对象正确设置值。但是，新值不会立即显示在父视图的绑定中。一旦我导航到新视图并返回，它就会改变，但它并没有像我预期的那样立即改变。

服务

var app = angular.module('app');
app.factory('myService', ['$http','$cacheFactory', '$q','$resource', '$rootScope', myService]);

function myService($http, $cacheFactory, $q, $resource, $rootScope) {

var item = { id: -1 , name: null};

var service = {
    item: item,
    setItem: setItem
};

return service;

function setItem(id) {
    item.id = id;
}

控制器1

(function () {
'use strict';

angular.module('app').controller('controller1',
    ['$scope', 'myService', controller1]);

function controller1($scope, myService) {

    function setItem(e, id) {
        if (id) {
            myService.setItem(id);
        }
    }

    $scope.tvItems = {
        dataSource: ds,
        select: function (e) {
            var id = e.sender.dataItem(e.node).id;
            setItem(e, id);
        }
    };
}
})();

查看1

<div data-ng-controller="controller1">
    <div kendo-tree-view k-options="tvItems"></div>
</div>

控制器2

(function () {
'use strict';
var module = angular.module('newModule', []);

module.controller('controller2', ['$scope','myService', controller2]);

function controller2($scope, myService) {

    $scope.activeItem = myService.item;

    // tried with and without this watch
    $scope.$watch(function () { return myService.item; }, function (item) {
        $scope.activeItem - item;
    }, true);
}
})();

查看2

<div data-ng-include="'view1.html'"></div>
<section data-ng-controller="controller2">
    {{activeItem.id}}
</section>

View1位于上面的ng-include中。 activeItem.id将更改但不会实时渲染，只有在导航到其他视图然后返回时才会显示。

Answer 1

通过在控制器1中的myService.setItem（id）之后添加$ scope。$ apply（）来解决....不确定这是否是正确的分辨率，但似乎具有所需的效果。

AngularJS - ng-include视图控制器中的服务变量更改未传播到父控制器

1 个答案: