Angular js 服务值不在视图中更新

Question

我正在使用 stateProvider，当状态改变时，我想更新 header 中的面包屑。我没有为每个状态编写它自己的嵌入式视图，而是将服务与它们的名称和链接共享面包屑数组，当某些状态被调用时每个控制器内部的函数设置它自己的这个数组的值，我可以在调试器中看到服务中的值是如何更新的，但是视图没有刷新有什么建议吗？代码：Header 控制器：

$scope.breadcrumbs = breadcrumbsService.breadcrumbs;

观点：

<md-button ng-repeat="breadcrumb in breadcrumbs" ui-sref="{{breadcrumb.link}}"> {{breadcrumb.title}} </md-button>

服务：

.service("breadcrumbsService", function Breadcrumbs() {
        var self = this;
        self.breadcrumbs = [
            {title: "Home", link: "KeyStyle.home"}
        ];
    });

任何其他控制器代码：

 .controller("ownerRegistrationController", ["$scope", "Owner", "$http", "domain", "breadcrumbsService",
        function ($scope, Owner, $http, domain, breadcrumbsService) {

            updateBreadcrumbs();
...
        function updateBreadcrumbs() {
                breadcrumbsService.breadcrumbs = [
                    {title: "Home", link: "KeyStyle.home"},
                    {title: "New owner", link: "KeyStyle.home.owner.registration"}
                ];
            }

Answer 1

当您重新分配 breadcrumbsService.breadcrumbs 时，您将破坏在 $scope.breadcrumbs = breadcrumbsService.breadcrumbs;

中建立的引用

相反，您应该 push 数组中的新条目。它还应该触发摘要循环 ($scope.$apply()) 或在下一个摘要循环中运行 ($scope.$applyAsync)

function updateBreadcrumbs() {
    $scope.$applyAsync(function() {
        breadcrumbsService.breadcrumbs.push({
            {title: "New owner", link: "KeyStyle.home.owner.registration"}
        });
    });
}

Angular js 服务值不在视图中更新

Angular js service value does not updates in the view

javascript

angularjs

angularjs-service

angularjs-scope

angular-ui-router