文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJS 1.5.x服务没有正确绑定，并且没有在控制器中更新

问AngularJS 1.5.x服务没有正确绑定，并且没有在控制器中更新
EN

Stack Overflow用户

提问于 2016-05-13 09:45:54

回答 1查看 54关注 0票数 1

由于某些原因，当我更新工厂值时，关联的视图不会更新。我绑定到服务中的一个对象，而不是字符串，所以我不知道我做错了什么，但是实现肯定有问题。为了简洁起见，我简化了代码，并将其添加到柱塞中。我以为我把服务搞砸了，但显然不是。我甚至还读了一遍这个文章，以确保我理解的是正确的。

标题的价值是第一次拿起，你会看到‘欢迎！’在标题中，但在此之后，它将不会更新为“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>

angularjs-1.5

javascript

angularjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-05-13 09:51:02

setTimeout是一种事件，它不允许告诉角在角上下文中发生了变化，因为它的自定义事件在角上下文之外运行。在这种情况下，摘要周期不会着火，您需要手动运行它。

理想情况下，您应该使用$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);

普朗克

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37206670

复制

相似问题

问AngularJS 1.5.x服务没有正确绑定，并且没有在控制器中更新
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS 1.5.x服务没有正确绑定，并且没有在控制器中更新EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS 1.5.x服务没有正确绑定，并且没有在控制器中更新
EN