Question

更新阵列/列表后，如何从控制器刷新angularjs视图？

以下是我的代码：

<div class="main-page" ng-app="GoalsListing1">                      
    <div ng-controller="CategoriesController as catCtrl">
        <ul class="side-nav">               
            <li ng-class="{active: $index == catCtrl.selected}" ng-click="catCtrl.setSelected($index)" ng-repeat="cat in catCtrl.categories">                           
                <span class="span-text">{{cat.name}}</span>
            </li>               
        </ul>
    </div>
    <div id="contentsGrid">                                             
        <table ng-controller="DetailsController as detailsCtrl">
            <thead>
                <tr><th>Goal Name</th></tr>
            </thead>            
            <tbody>
                <tr ng-show="detailsCtrl.goalDetailsList === undefined">
                    <td align="center">No data found to display</td>
                </tr>
                <tr ng-repeat="detail in detailsCtrl.goalDetailsList"> 
                    <td>{{detail}}</td>
                </tr>
            </tbody>                            
        </table>
    </div>              
</div>

和JS：

var app = angular.module("GoalsListing1", []);

    //categories at top rendering
    var goalCategories = [{"id":"1", "name":"Cat1"}, {"id":"2", "name":"Cat2"}];

    //against each category its details
    var goalDetails = {"Cat1":["goal1", "goal2"], "Cat2":["goal1", "goal2", "goal3"]};

    //service to share data between controllers
    app.service("GoalDetailService", function($rootScope){
        this.goalDetail = goalDetails;      
        this.selectedCatName = "";
        this.filteredList = {};

        this.getGoalDetail = function(catName){
            this.filteredList = this.goalDetail[catName];
            return this.filteredList;
        };

        this.setGoalDetail = function(catName){
            this.filteredList = this.goalDetail[catName];                   
        };  
    });

    //rendering side nav goal categories and set selected category
    app.controller("CategoriesController", function($scope, GoalDetailService){
        this.categories = goalCategories;                   
        this.selected = 0;      
        GoalDetailService.selectedCatName = this.categories[this.selected].name;
        GoalDetailService.setGoalDetail(GoalDetailService.selectedCatName);

        this.setSelected = function(index){
            this.selected = index;

            GoalDetailService.selectedCatName = this.categories[this.selected].name;
            GoalDetailService.setGoalDetail(GoalDetailService.selectedCatName);         

        };                  
    }); 

    //details grid rendering controller
    app.controller("DetailsController", function($scope, GoalDetailService){
        $scope.service = GoalDetailService;
        this.goalDetailsList = GoalDetailService.filteredList;

        //set watch when selection from side nav changes
        $scope.$watch('service.filteredList', function(newList){                    
            $scope.goalDetailsList = newList;                       
        });     
    });

这是小提琴： http://jsfiddle.net/5fnp8tgs/

当我在Cat1和Cat2之间切换时，来自goalDetails列表的相应数组未在View中更新。

请帮帮我。

Answer 1

虽然另一个答案解决了这个问题，但别名不是问题......你只是没有正确使用它。您需要使用this代替$scope。

app.controller("DetailsController", function($scope, GoalDetailService){
    var self = this;
    $scope.service = GoalDetailService;
    this.goalDetailsList = GoalDetailService.filteredList;

    //set watch when selection from side nav changes
    $scope.$watch('service.filteredList', function(newList){ 
        self.goalDetailsList = newList;                         
    });     
});

updated jsfiddle

Answer 2

您不需要控制器：<tr ng-repeat="detail in detailsCtrl.goalDetailsList">

而是使用它：

<tr ng-repeat="detail in goalDetailsList">

它使用控制器的$ scope中的goalDetailsList，您已在此处声明：

<table ng-controller="DetailsController as detailsCtrl">

AngularJS：无法从控制器重新加载/刷新视图

2 个答案: