Question

我有一个angularJs应用程序。

在那里我有一个“LayoutCtrl”（LayoutController），它说（例如）“存在多少个头菜单链接”。

我已经创建了我的控制器和我的服务 - 它工作正常。现在，在某些情况下，该网站需要新的HeadMenu-Links（例如登录/注销时）或小部件（侧面有额外内容的小盒子）。

所以我从LayoutCtrl到控制器的$ scope（用于稍后抓取它并修改它的值）。

在测试（警告某些值）时，我的$ scope始终是相关值，也是返回的JSON中的更改（来自php服务）。

但DOM不会改变。

它可能是什么？

布局部分：

<div ng-controller="LayoutCtrl">
    <div desc='header' class='header' >
        <a desc='hp_link' class='hp_link'  href="#{{header.index}}">
            <img desc='banner' class='banner'  ng-src="{{header.banner}}" src="zkLib/f/img/ajax-loader-sm.gif">
        </a>
        <div desc='headerRow' class='headerRow'>
            <div desc='headerMenu' class='headerMenu'>
                <span ng-repeat="m in header.mHead">
                    <span desc='hmLink' class='hmLink' >
                        <a desc='headerLink' class='headerLink'  href="{{m.link}}">{{m.text}}
                            <img desc='headerImg' class='headerImg'  ng-src="ico/{{m.image}}" heightt="16px;"/>
                        </a>
                    </span>
                </span>
            </div>
            <div desc='networksMenu' class='networksMenu'>
                <span ng-repeat="n in header.network">
                    <span desc='nwLink' class='nwLink' >
                        <a desc='networkLinK' class='networkLinK'  target="_blank" title="{{n.name}}" href="{{n.link}}">
                            <img desc='networkImg' class='networkImg'  ng-src="zkLib/f/img/icons/{{n.icon}}"/>
                        </a>
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>

控制器：

app.controller("LayoutCtrl", ["$scope", "$route",
"HeaderService", "AppService", "WidgetsService", "FooterService",
function($scope, $route, HeaderService, AppService, WidgetsService, FooterService) {
    $scope.refresh = function(route) {  
        HeaderService.query().then(
            function(result) { $scope.header = result.data }, function(result) {}
        );
        WidgetsService.query().then(
            function(result) { $scope.widgets = result.data }, function(result) {}
        )
        $scope.$route = route;
        alert(JSON.stringify($scope.header));
    };

    $scope.refresh($route);

    AppService.query().then(
        function(result) { $scope.app = result.data }, function(result) {}
    );
    FooterService.query().then(
        function(result) { $scope.footer = result.data }, function(result) {}
    );
    AppService.$scope = $scope;
}]);

其中一项被叫服务：

app.factory('HeaderService', ['$http', '$q',
function ($http, $q) {
    var service = {};

    service.query = function() {
        var data = $http.get(sAddr('header'));
        var deffered = $q.defer();
        deffered.resolve(data);
        return deffered.promise;
    };

    return service;
}]);

（sAddr返回服务的正确服务器路径）

在其他控制器上（例如索引页面，用户页面......）我打电话

AppService.$scope.refresh($route);

强制控制器刷新（新菜单？新小部件？）并正确重新加载（我认为） - 上面代码中的警告打印出正确的json。

但DOM不会改变。我做错了什么？

我使用来自其他StackOverFlow的示例代码构建了此模式 - 问题：

enter link description here

我在Servoce上构建了一个类似的例子。$ scope.refresh - 调用其他Controller（TestController） - 它工作得很好......但是这里 - 没有差别，没有。

感谢您的回答 - 凯

Answer 1

您尝试使用$ scope。$ apply（）或$ rootScope。$ digest（）来获取DOM中刷新的所有数据。从绑定的控制器外部更新任何模型将更新数据，但Angular不知道它。有时，设置带有$ scope的手表。$ watch并更新控制器内的值将为您提供DOM中的刷新数据。

在你的承诺结束时尝试$ scope。$ digest（）也是一种选择。

http://nathanleclaire.com/blog/2014/01/31/banging-your-head-against-an-angularjs-issue-try-this/

AngularJS重载控制器不会更改DOM

1 个答案: