AngularJS 1.5.x 服务未正确绑定且未在控制器中更新

Question

出于某种原因，当我更新出厂值时，关联的视图没有更新。我绑定到服务中的对象而不是字符串，所以我看不出我做错了什么，但实现肯定有问题。为了简洁起见，我减少了代码，并将其添加到 plunker 中。我以为我搞砸了服务，但显然不是。我什至又读了一遍 article 以确保我认为我理解的是正确的。

第一次取title的值，在title中看到'Welcome!'，之后不会更新为'Up Next!'。

https://plnkr.co/edit/ma1SDJyIKoFPWznXdxTO?p=preview

<!DOCTYPE html>
<html ng-app="app">
<head>
    <html-title></html-title>
</head>
<body>

<main></main>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<script>

(function () {

    'use strict';

    function MainController(HtmlTitleFactory) {

        HtmlTitleFactory.set('Welcome!'); // title gets set

        // check title was changed
        this.data = HtmlTitleFactory.get();

        setTimeout(function() {
            // updates title
            HtmlTitleFactory.set('Up Next!');

            // title looks to be set, but changes not picked up in view
            console.log(HtmlTitleFactory.get());
        }, 3000);
    }

    MainController.$inject = [
        'HtmlTitleFactory'
    ];

    var main = {
        template: '<div>{{ vm.data.title }}</div>',
        controller: MainController,
        controllerAs: 'vm'
    };

    ////////////////////////////

    function HtmlTitleController(HtmlTitleFactory) {

        var vm = this;

        //vm.title = HtmlTitleFactory.get().title;
        vm.title = HtmlTitleFactory.get();
    }

    HtmlTitleController.$inject = [
        'HtmlTitleFactory'
    ];

    var htmlTitle = {
        template: '<title>{{ vm.title.title }}</title>',
        controller: HtmlTitleController,
        controllerAs: 'vm'
    };

    ////////////////////////////

    function HtmlTitleFactory() {

        var service = {
            title: 'Default'
        };

        function set(title) {
            // originally tried this since bound to object this should work
            // service.title = title;

            // wasn't working so tried this as well
            angular.extend(service, { 
               title: title
            });
        }

        function get() {
            return service;
        }

        return {
            set: set,
            get: get
        };
    }

    HtmlTitleFactory.$inject = [];

    ////////////////////////////

    angular
        .module('app', [])
        .component('main', main)
        .component('htmlTitle', htmlTitle)
        .factory('HtmlTitleFactory', HtmlTitleFactory);

})();

</script>

</body>
</html>

Answer 1

setTimeout 是一个事件，它不会告诉 angular angular 上下文中发生了更改，作为其运行在 angular 之外的自定义事件语境。在那种情况下，摘要循环不会启动，您需要手动运行它。

理想情况下，您应该使用 $timeout，它的工作方式与 setTimeout 类似，并且它运行是触发回调时的摘要周期。

$timeout(function() {
   HtmlTitleFactory.set('Up Next!'); // update title
   console.log(HtmlTitleFactory.get()); // title looks to be set but not picked up in view
}, 3000);

Plunkr

AngularJS 1.5.x 服务未正确绑定且未在控制器中更新

AngularJS 1.5.x Service Not Bound Correctly and is Not Updating in Controllers

javascript

angularjs

angularjs-1.5