AngularJS 服务未更新视图

Question

我在 AngularJS 项目的 application.js 文件中声明了一项服务。它看起来像这样：

application.factory('interfaceService', function ($rootScope, $timeout) {
    var interfaceService = {};
    interfaceService.lang = "";
    interfaceService.dev = ""
    interfaceService.theme = "";
    interfaceService.integ = "";
    //For Integration Type
    interfaceService.demo = function (dev, theme, integ, lang) {
        this.dev = dev;
        this.theme = theme;
        this.integ= integ;
        this.lang = lang;
        this.broadcastItem();
    };
    interfaceService.broadcastItem = function () {
        $timeout(function(){
             $rootScope.$broadcast('handleBroadcast');
        });
    };
    return interfaceService;
});

我正在使用上述服务在我的 Controllers 中的 2 个之间传递变量。调用服务的控制器在这里：

        $scope.buildDemo = function () {
            interfaceService.demo(device, template, integ, language);
            $rootScope.template = template;
            $rootScope.themeFolder = template;
            $state.go("MainPage", {
               "themeName": $rootScope.themeFolder
            });
        }

当用户点击我的 view

上的 div 时会触发该函数

<div id='build-btn' ng-click='buildDemo()'>Go</div>

我遇到的问题是当我单击按钮时我的视图没有更新。我必须再次点击它才能看到任何变化。有人知道是什么原因造成的吗？ URL 更新并且新视图出现在页面上，但是在我第二次单击 "Go" 按钮之前，根据服务中设置的参数应该显示的元素是不可见的。

Answer 1

第一次点击时 handleBroadcast 事件被广播，但没有人收到，因为当您按下 "GO" 按钮时，此时会发生状态转换并加载模板及其控制器。当控制器实例化时，它在 handleBroadcast 事件上使用 $on 注册侦听器事件。

我建议您等到控制器及其基础视图呈现后再广播事件。这可以通过利用 $state.go 方法返回的承诺来完成。转换成功时完成。

代码

$scope.buildDemo = function() {
    //state transition started.
    $state.go("MainPage", {
        "themeName": $rootScope.themeFolder
    }).then(function() {
        //state transition completed
        //controller instance is available & listener is ready to listen
        interfaceService.demo(device, template, integ, language);
        $rootScope.template = template;
        $rootScope.themeFolder = template;
    });
}

AngularJS 服务未更新视图

AngularJS service is not updating the view

javascript

angularjs

routing

angular-ui-router

angularjs-routing