在 .then 中更新 $scope？答案

【问题标题】：Update $scope inside .then?在 .then 中更新 $scope？
【发布时间】：2016-06-26 13:52:37
【问题描述】：

我在控制器中有一个函数，我对如何从 .then 函数中更新 $scope 变量感到困惑。

这是我的功能：

searchSpotify(query, $scope) {
    this.Spotify.search(query,'track').then(function (data) {
        console.log(data.tracks.items); // this is working
        $scope.result = data;
  }); 
}

在控制台日志中我收到此错误：

TypeError: Cannot set property 'result' of undefined

我会以某种方式使用 $scope.$apply 吗？

编辑：

这是上下文的整个控制器

(function() {

    class SelectionController {
        constructor(User, groupService, selectionService, songService, $scope, $routeParams, Spotify) {
            this.groupId = $routeParams.groupId;
            this.selectionId = $routeParams.selectionId;
            this.groupService = groupService;
            this.selectionService = selectionService
                //this.selections = this.selectionService.getSelections();
            this.songService = songService;
            this.searchResults;
            this.$scope = $scope;
            this.Spotify = Spotify
        }

        searchSpotify(query) {
            this.Spotify.search(query, 'track').then(function(data) {
                console.log(data.tracks.items);
                $scope.result = data;
            });
        }

        addSong(name, artist, album) {
            alert('called from selection controller');
            this.songService.addSong(this.selectionId, name, artist, album);
        }

        createSelection(name, description) {
            this.selectionService.createSelection(this.groupId, name, description);
        }

        deleteSelection(selection) {
            this.selectionService.deleteSelection(selection);
        }
    }

    angular.module('songSelectionApp')
        .controller('SelectionController', SelectionController);

})();

【问题讨论】：

如果此函数位于控制器中，请不要将 $scope 变量传递给它。
then 调用的函数作为不同的范围。如果你使用 ES6，你可以使用箭头函数，或者bind()
当我没有传入 $scope 变量时，我在控制台中收到以下错误：“ReferenceError: $scope is not defined”
您是否在控制器中注入了 $scope 变量？
我要发布整个控制器

标签： javascript angularjs

【解决方案1】：

保存对 $scope 的引用：

    searchSpotify(query) {
        var $scope = this.$scope;
        this.Spotify.search(query, 'track').then(function(data) {
            console.log(data.tracks.items);
            $scope.result = data;
        });
    }

或者使用arrow functions:

    searchSpotify(query) {
        this.Spotify.search(query, 'track').then((data) => {
            console.log(data.tracks.items);
            this.$scope.result = data;
        });
    }

.bind(this) 也应该可以工作，正如另一个答案所暗示的那样。

关于$scope.$apply：仅当您想在$digest 之外更改$scope 时才需要它，例如，当您使用外部（非角度）库/函数（如WebSocket 或jquery）时事件监听器。直到Spotify 是一个角度服务/工厂——你不需要$scope.$apply

来自docs：

$apply() 用于从 Angular 框架外部执行 Angular 表达式。（例如来自浏览器 DOM 事件、setTimeout、XHR 或第三方库）。

【讨论】：

【解决方案2】：

this.Spotify.search(query,'track').then(function (data) {
    console.log(data.tracks.items); // this is working
    this.result = data;
}.bind($scope));

应该是你真正需要的。您基本上是在告诉内部范围 this 应该是什么

【讨论】：

我想，$scope 是未定义的。如果您通过 .bind(this.$scope)，您的示例将起作用
我必须使用 .bind(this.$scope) 才能让这个选项起作用

【解决方案3】：

你应该使用

this.Spotify.search(query,'track').then(function (data) {
    console.log(data.tracks.items); // this is working
    this.$scope.result = data;
}.bind(this));

【讨论】：