在工廠變更時更新控制器$ scope

Question

我在控制器內部創建了一個名為Call的工廠，在$ scope中有一個Calls數組。 我想做的是更新Call對象並更新$ scope。 我已經嘗試過使用$ on，但是我無法使用它，即使我可以，它也有點模糊。

修改出廠對象后，如何更新$ scope？

var ctiApp = angular.module('ctiApp', []);

ctiApp.controller('PhoneController', function($scope,$interval,$http,Call,$rootScope){
    $scope.calls = [

    ];


    $scope.dial = function(number){
        var call = new Call();
        call.dial(number);
        $scope.calls.push(call);
    }

});

// Factory
ctiApp.factory('Call',['$rootScope','$http', function($rootScope ,$http){
    var Call = function()  {
        this.channel='';
        this.uid='';
        this.time='00:00:00';
        this.state='connecting';
        this.callerid='';
    }

    Call.prototype.dial = function(number){
        $http({method: 'GET', url: '/url'}).
            success(function(data, status, headers, config) {
                if(data.data.response==='Success'){
                    console.log('#CONNECTED');
                    this.state = 'connected';
                    this.time = '00:00:00';
                    this.uid = data.data.uniqueid;
                    this.channel = data.data.channel;
                    this.callerid = number;
                }
            });
    }
    return Call;
}]);

注意：我已經從這些功能中剔除了大部分功能，這就是為什么仍然有些$ http，$ interval等的原因。

Answer 1

我知道這並不是您真正遇到的問題，但是創建一個類（例如您的Call類）的多個實例的另一種方法是使用$ controller服務。 在Google NG Conf Talk的“ 編寫大規模Angular應用”中推薦了這種方法。

這是一個例子：

HTML：

<div ng-app="myApp" ng-controller="myCtrl as ctrl">
    instance1: {{ctrl.instance1}}
    instance2: {{ctrl.instance2}}
</div>

JS：

var myApp = angular.module('myApp', []);

myApp.controller('Foo', function() {
    var Foo = function($log) {
        this.$log = $log;
        this.sampleField = 1;
    }

    Foo.prototype.increaseSampleField = function() {
        this.sampleField++;
        this.$log.info('sample field is now: ' + this.sampleField);            
    };

    return Foo;
}());

var myCtrl = function($controller) {
    this.instance1 = $controller('Foo');
    this.instance2 = $controller('Foo');
    this.instance2.increaseSampleField();
}

這是JsFiddle： http ： //jsfiddle.net/robianmcd/M2Phe/

Answer 2

實際上，該解決方案比從表面上看要簡單得多。 我本來是在更新錯誤的信息，因此不需要使用服務（$ emit，$ broadcast，$ on等）之類的觸發器來傳播更改。

該功能最初不起作用的原因是因為。 不再指的是Call對象，而是指它使用的$ http動詞。

因此，修改功能如下所示：

Call.prototype.dial = function(number){
    var self=this;//This is key! 
    $http({method: 'GET', url: '/url'}).
        success(function(data, status, headers, config) {
            if(data.data.response==='Success'){
                console.log('#CONNECTED');
                self.state = 'connected';
                self.time = '00:00:00';
                self.uid = data.data.uniqueid;
                self.channel = data.data.channel;
                self.callerid = number;
            }
        });
}

Answer 3

聲明工廠的正確方法是返回一個函數示例：

app.factory('testFactory', function(){
return {
    sayHello: function(text){
        return "Factory says \"Hello " + text + "\"";
    },
    sayGoodbye: function(text){
        return "Factory says \"Goodbye " + text + "\"";
    }  
}               
});