javascript - 从 Controller 外部调用和更新 Angular Controller $scope 的服务？

Question

Controller 功能:

$scope.init = function () {
            Words.get('init', $scope.randNum)
                .error(function (data) {
                    console.log('init error: ' + data.message);
                })
                .success(function (data) {
                    $scope.board = data.settings.board;
                    $scope.tray = data.tray;
                    $scope.scores = data.pointsPerLetter;
                    $scope.totalScore = data.score.total;
                    console.log('init: ' + $scope.tray);
                })
        }

和我的服务:

angular.module('wordService', [])
    .factory('Words', function ($http) {
        var id;
        return {
            get: function (call, num) {
                id = num;
                return $http.get('http://xxxxx');
            },
            send: function (call, data) {
                console.log('send: ' + data)
                return $http.post('http://xxxxx' + call, data);
            }
        }
    });

现在代替ngAccess = angular.element(document.getElementById('ws')).scope();调用 ngAccess.init() 或 $scope.init

如何将此调用添加到服务中，从而在需要时调用它，同时仍然更新 Controller 内的范围？上面的方法不起作用的原因是我正在使用 browserify 并且我还没有访问范围的权限。

场景:我需要能够单击按钮并调用更新范围的函数。注意:按钮已创建并添加到 Canvas 中。 (应该没关系，因为我仍然有点击通话等)。

一如既往地提前致谢!

Answer 1

将数据对象移动到服务中并分配对 Controller 范围变量的引用...

您的工厂可能如下所示:

.factory('Words', function ($http) {
    var id;
    var results = {};

    var get = function (call, num) {
        id = num;
        return $http.get('http://xxxxx').then(function(response){
            results.board = response.data.settings.board;
            results.tray = response.data.tray;
            results.scores = response.data.pointsPerLetter;
            results.totalScore = response.data.score.total;
        };
    };

    var send = function (call, data) {
        console.log('send: ' + data)
        return $http.post('http://xxxxx' + call, data);
    };

    return {
        get: get,
        send: send,
        results: results
    }
});

虽然你的 Controller 看起来像:

.controller(function($scope, Words){
    $scope.words = Words.results;
    $scope.init = function () {
        Words.get('init', $scope.randNum).then(function(){
            console.log($scope.words); // should log the data you want
        }, function(response){ console.log(response)});
    };
    // still calling from controller but you could from any component and still
    // have the local scope variable update based on its assignment to the
    // service object
    $scope.init(); 
})

请注意，我确实对您的工厂进行了更多修改以使用揭示模块模式。这样，除了来自其他组件的调用之外，您还可以对 get/set 函数进行内部调用。

现在您应该能够在应用程序中的任何其他位置添加按钮(即不需要从 Controller 范围继承原型(prototype))。例如，该指令将进行调用并更新结果，这将反射(reflect)在 Controller 作用域变量中

.directive('update', function(Words){
    return function(scope) {
        scope.update = function(){
            Words.get('update', 'somevalue')
        }
    }
})

它在 View 中的声明如下:

<button update ng-click="update()">Update</button>