从控制器更改视图答案

【问题标题】：Changing a view from a controller从控制器更改视图
【发布时间】：2016-08-08 17:12:58
【问题描述】：

我是 Angular 的新手，并且在更改变量时无法更新我的视图。我正在尝试更新视图以显示团队的新价值。这是我的控制器。

app.controller('CompetitionController', function ($scope, $log, competitionService, teamService) {

competitionService.getCompetitions().success(function (response) {
    $scope.competition = response;
}, function (reason) {
    $scope.error = reason.data;
});

$scope.team;
$scope.getTeams = function (competitionId) {
    teamService.getTeams(competitionId)
        .success(function (response) {
            $scope.team = response;
            $log.info($scope.team);
        })
        .error(function (response) {
            console.log('Get Teams Error: ' + response);
        });

}

});

这是我的看法。

                        <tbody>
                            <tr ng-repeat="t in team track by $index">
                                <td>{{t}}</td>
                                <td>{{t}}</td>
                            </tr>   
                        </tbody>

这个视图最初加载时对团队没有任何价值，团队的价值是从另一个视图调用 getTeams 函数后更新的。使用 ng-click 调用 getTeams 函数。谢谢！！

编辑完整视图

<div class="col-lg-12 col-sm-6 col-xs-12" ng-controller="CompetitionController">
<div class="widget flat radius-bordered">
    <div class="widget-header bg-themeprimary">
        <span class="widget-caption">Flat Tabs in Widget</span>
    </div>
    <div class="widget-body">
        <div class="widget-main ">
            <tabset flat="true">
                <tab heading="Teams">
                    <table class="table table-hover table-striped table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="t in team track by $index">
                                <td>{{t}}</td>
                                <td>{{t}}</td>
                            </tr>   
                        </tbody>
                    </table>
                </tab>
                <tab heading="Venues">
                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                </tab>
                <tab heading="Players">
                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                </tab>
            </tabset>
        </div>
    </div>
</div>

解决方案：谢谢大家的帮助，我想出了问题所在。我有 2 个视图调用同一个控制器，因此每个视图都在创建控制器的一个版本，因此变量没有在视图之间更新。我将使用工厂来更改变量，以便每个控制器都可以访问它。

【问题讨论】：

$log.info的输出是什么
我得到了一组团队。每个团队只是一串团队名称
你能给我们展示所有的html吗？从您提供的代码来看，它似乎是正确的。
也共享数组
数组在控制台中看起来像这样，["AFC Bournemouth", "Arsenal FC", "Burnley FC", "Chelsea FC", "Crystal Palace FC", "Everton FC", "赫尔城 AFC、莱斯特城足球俱乐部、利物浦足球俱乐部、曼彻斯特城足球俱乐部、曼联足球俱乐部、米德尔斯堡足球俱乐部、南安普顿足球俱乐部、斯托克城足球俱乐部、桑德兰足球俱乐部、 Swansea City AFC”、“Tottenham Hotspur FC”、“Watford FC”、“West Bromwich Albion FC”、“West Ham United FC”]

标签： javascript html angularjs view controller

【解决方案1】：

代码有几个错误： 1）您对 get 方法承诺响应使用了成功和错误。但是，您正在使用两者的混合。它应该是

competitionService.getCompetitions() .success(function (response) { $scope.competition = response; }) .error(function (reason) { $scope.error = reason.data; }); 或者应该是

competitionService.getCompetitions().then(function (response) { $scope.competition = response; }, function (reason) { $scope.error = reason.data; });

首选使用第二种方法进行响应，因为在 Angularjs 中不推荐使用成功和错误。

为了观看，

 <tbody>
      <tr ng-repeat="t in team">
           <td>{{ $index }}</td>
           <td>{{ t }}</td>             
       </tr>   
       </tbody>

这将为您提供表格中所有团队名称的行。你不必使用 $index 的跟踪。

【讨论】：

谢谢！我改变了我的控制器和视图，但我仍然有同样的问题。视图仍然没有显示新的团队价值观
这是一个工作小提琴，jsfiddle.net/nehatrajan/Lvc0u55v/8086
谢谢！如果我使用数组而不是函数，它会起作用。 $scope.team 变量不会在函数之外更新并且保持未定义。我想在函数内部更新它，函数外部的变量反映了这种变化。看来我遇到了范围问题。

【解决方案2】：

试试这个

app.controller('CompetitionController', function ($scope, $log, competitionService, teamService) {


$scope.team=[];
competitionService.getCompetitions().then(function (data) {
$scope.competition = response.data; //Assuming response have data key
 }, function (err) {
                $scope.error = err;
            })

$scope.getTeams = function (competitionId) {
    teamService.getTeams(competitionId)
        .then(function (response) {
            $scope.team = response;
        }, function (err) {
                console.log(err);
            })

}

});

在 html 中

<tr ng-repeat="t in team track by $index">
           <td>{{t}}</td>
 </tr>

【讨论】：