Question

我有三个控制器继承自一个包含数据的主控制器。我通过函数调用在每个ng-repeat中表示数组，并且我猜测列表在更改模型后不会更新的原因。

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

当所选组/主题发生变化时，知道为什么列表不会重新呈现？

（所选课程在点击时更新，所以我知道它会被解雇。）

这是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>

以下是控制器：

   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打败了我实际问题，但我不想添加以下内容。

您将控制器用作数据控制器的想法并不是Angular方式：控制器最重要的是视图控制器。在您的情况下，我会将DataCtrl重写为服务，并将其注入（视图）控制器中。这允许您将$ scope变量绑定到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;
}]);

Answer 2

您正在覆盖子控制器中的绑定，这可以通过将范围变量放入对象中轻松解决。确保修复你的引用，它会起作用。

$scope.my = { selectedGroup :0, selectedTopic :0, selectedRule :0};

欢呼声

当共享$ scope更改时，如何让ng-repeat重新呈现？

2 个答案: