Angular - 我的控制器不会在视图中更新我的组件数据

Posted 2023-02-23

【中文标题】Angular - 我的控制器不会在视图中更新我的组件数据

【英文标题】：Angular - My controller does not update my component data in the view

【发布时间】：2016-11-30 16:30:13

【问题描述】：

所以，我的问题是这样的：

我有一个使用过两次的组件，它定义了一个模板。

组件：

.component('topList', 
    template: '<div class="well"> \
                <div class="title"> \
                <h3>$ctrl.model.title</h3><a href="#" class="close"><i class="ss-delete"></i></a> \
                </div> \
                <div ng-repeat="i in $ctrl.model.items" class="list-question"> \
                <div class="item"><span class="number">$index + 1</span> \
                <div class="description"> \
                <h4>(i.Count/ $ctrl.model.total)*100 | number:2% (i.Count de  $ctrl.model.total )</h4> \
                <p>i.Description</p> \
                </div> \
                </div> \
                </div> \
                </div>',
    controller: TopListController,
    bindings: 
        model: '='
    
)

function TopListController() 

控制器：

    .controller('myController', function ($http, $scope, $controller, datesService) 
    var ctrl = this;

    $scope.api = function () 
            var date = datesService.getDates();
            $http.get("apicall/date.from/date.to").then(function (response) 
                ctrl.model = 
                    title: 'Title',
                    items: response.data.Items,
                    total: response.data.Total
                ;
            );
    

    $http.get("apicall/date1/date2").then(function (response) 
        ctrl.model = 
            title: 'Title',
            items: response.data.Items,
            total: response.data.Total
        ;
    );
)

html（实际上是翡翠）：

    div(ng-controller="myController as controller")
        top-list(model="controller.model")

当页面加载时，组件填充了来自在创建控制器时调用的方法 $http.get 的数据，但是当我从 html 调用方法 api() 时，数据不会改变。

我正在从另一个控制器调用方法 api()。

【问题讨论】：

您在控制器内部将controllerAs 与$scope 混合在一起，因此您可能会感到困惑。理想情况下，您应该放置在控制器上下文中 (this)。然后你可以调用像ng-click="$ctrl.api()"

这样的方法

我不明白，我忘了提到我从另一个控制器调用方法 api。

你能解释一下“从另一个控制器调用方法api”部分吗？你的意思是没有从控制器对应的模板中调用api方法？

是的，这个方法是从另一个控制器调用的，它控制两个输入，在本例中是两个日期，API 请求获取一个包含这些天之间发生的信息的 json。我需要更新这个组件的信息。

【参考方案1】：

如果您使用获取的数据来更新视图，则无需调用$scope.$apply();。您已经使用 2 路数据绑定设置了观察者

这个

$http.get("apicall/date.from/date.to)

应该是这个（你忘了"）

$http.get("apicall/date.from/date.to")

【讨论】：

我在编辑时忘记了“，它是真的，我实际上不需要 $scope.$apply()，但它没有改变视图，我不知道它是如何工作的，即使经过很多研究。

你使用controllerAs 吗？如果你使用 $scope，看起来你不会。在您的 ctrl 中尝试将 var ctrl = this; 更改为 var ctrl = $scope;

我没有使用 controllerAs.. 但我想我必须对它进行研究.. 我做出了改变，但它没有用..

你能用 plunker 或 jsfiddle 做一个小演示吗？这会比猜测要好得多

当然，但是我现在不会这样做，我很累，尝试了很多来解决这个问题，但我明天肯定会这样做，并编辑我的帖子，非常感谢你的人时间。