javascript - 当共享 $scope 更改时，如何让 ng-repeat 重新渲染？

Question

我有三个 Controller ，它们继承自一个包含数据的主 Controller 。我用函数调用来表示每个 ng-repeat 中的数组，我猜测这就是模型更改后列表不更新的原因。

其他信息:为了让您了解该模型 - 主题嵌套在组中，规则嵌套在主题中。因此，当我选择一个组时，我只想显示该组的主题，当我选择一个主题时，我只想显示该主题的规则。

知道为什么当选定的组/主题更改时列表不会重新呈现吗？

(选定的类(class)会在点击时更新，所以我知道它正在触发。)

这是 HTML:

<div ng-controller="DataCtrl">


    <div ng-controller="GroupCtrl">
        <nav>
            <h4>Groups</h4>
            <ul ng-repeat="group in getGroups()">
                <li><a href="#" ng-click="selectGroup($index)"
                    ng-class="selectedGroupClass($index)">{{group.name}}</a></li>
            </ul>
        </nav>

    </div>

    <div ng-controller="TopicCtrl">

        <ul ng-repeat="topic in getTopics()">
            <li><a href="" ng-click="selectTopic($index)"
                ng-class="selectedTopicClass($index)">{{topic.name}}</a></li>
        </ul>


    </div>
    <div ng-controller="RuleCtrl">

        <ul ng-repeat="rule in getRules()">
            <li ng-click="selectRule($index)"
                ng-class="selectedRuleClass($index)">{{rule.text}}</li>
        </ul>

    </div>


</div>




</div>

以下是 Controller :

   angular.module('paxApp').controller("DataCtrl",function($http,$scope){

        $scope.data = [{topics:[{rules:[]}]}];

        $http.get('js/data/userData.json').success(function(data) {

            $scope.data = data;

            console.log("user data",$scope.data);
        });

        $scope.selectedGroup = 0;
        $scope.selectedTopic = 0;
        $scope.selectedRule = 0;

    });

angular.module('paxApp').controller("GroupCtrl", function($scope) {

    $scope.selectedGroup = 0;

    $scope.getGroups = function(){
        return $scope.data;
    };

    $scope.selectGroup = function(index){

        $scope.selectedGroup = index;
        console.log($scope.selectedGroup);
    };

    $scope.selectedGroupClass = function(index) {

        return $scope.selectedGroup === index ? "group-selected" : "";

    };


});

angular.module('paxApp').controller("TopicCtrl", function($scope) {

    $scope.getTopics = function() {

        return $scope.data[$scope.selectedGroup].topics;
    };

    $scope.selectedTopicClass = function(index) {

        return $scope.selectedTopic === index ? "topic-selected" : "";
    };

    $scope.selectTopic = function(index) {

        $scope.selectedTopic = index;

    };

});

angular.module('paxApp').controller("RuleCtrl",function($scope){

    $scope.getRules = function() {

        return $scope.data[$scope.selectedGroup].topics[$scope.selectedTopic].rules;

    };


    $scope.selectRule = function(index) {

        $scope.selectedRule = index;

    };

    $scope.selectedRuleClass = function(index) {

        return $scope.selectedRule === index ? "rule-selected" : "";

    };

});

Answer 1

Dan Doyon 比我更早地解决了实际问题，但我无论如何都想添加以下内容。

您使用 Controller 作为数据 Controller 的想法并不是真正的 Angular 方式: Controller 最重要的是 View Controller 。在您的情况下，我会将 DataCtrl 重写为服务，并将其注入(inject)到需要的( View ) Controller 中。这允许您将 $scope 变量绑定(bind)到 Services 变量以保持所有内容更新。

app.controller('MyCtrl', ['$scope', 'DataService', function ($scope, DataService) {
    $scope.varThatNeedsData = DataService.data;
}]);

// Init is intended to be used for the resolve property in the $routeProvider. 
app.service('DataService', ['$http', function ($http) {
    var self = this;
    self.data = {};

    self.init = function () {
        var deferred = $q.defer();
        $http.get('data/url').then(function (response) {
            self.data = response.data;
            deferred.resolve();
        });
        return deferred.promise();
    };

    return self;
}]);