如何从服务中调用控制器功能?

时间:2015-01-02 09:32:38

标签: angularjs controller angular-services

我有两个不在同一范围内或有父子关系的控制器。

所以我想从controlleB调用ControllerA中的一个函数。在我的情况下,它是一个带有addItem函数的listContoller,我想在点击提交后从页面上的其他地方的addItemController调用此函数。我知道这应该与服务一起使用,但我不知道如何。

app.controller("listCtrl", ["$scope", "listSvc", function ($scope, listSvc){
    $scope.list.data = listSvc.load("category");
    $scope.addItem = function(newitem) {
        $scope.list.data.unshift(newitem);
        ...
    }
}]);

app.controller("addItemCrtl", ["$scope", "listSvc", function ($scope, listSvc){
    $scope.addItem = function() {
        listSvc.addItem($scope.newItem);
    }
}]);

app.service('listSvc',  function() {
    return{
        load: function(section){
            ...
        },
        addItem: function(item){
            addItem(item); <<-- call function in listController
        }
    }
});

更新

k这样更好吗?我将list.data放入我的服务中,如果列表发生变化,我会从控制器中观察并将其放在我的控制器的范围内,ng-repeat可以完成他的工作......这个appraoch更好吗?或者为我提供一些更好的提示我应该怎么做...

app.service('listSvc',  ['$http', function($http) {
    var list = {};
    return {    
        list:{
            get: function () {
                return list.data;
            },
            set: function (data) {
                list.data = data;
            }           
        },
        addItem: function(item){
            var response = $http.post("/api/album/"+$scope.list.section, item);
            response.success(function(){
                list.data.unshift(item);
                console.log("yeah success added item");
            }).error(function(){
                console.log("buuuh something went wrong");
            });
            return response;
        },

        load: function(section){
            var response = $http.get("/api/album/"+section);
            response.success(function(data){
                list.set(data);
                list.section = section;
                console.log("yeah success loaded list");
            }).error(function(){
                console.log("buuuh something went wrong");
            });
            return response;
        }
    };
}]);

在我的控制器中我这样做

app.controller("listCrtl", ["$scope", "listSvc", function ($scope, listSvc){
    listSvc.load("category");
    ...
    $scope.$watch('listSvc.list.get()', function(data) {
        $scope.list.data = data;
    });
    ...
}]);


app.controller("addItemCrtl", ["$scope", "listSvc", function ($scope, listSvc){
    ...
    $scope.addItem = function() {
        listSvc.addItem($scope.newItem);
    }
    ...
}]);

gregor;)

1 个答案:

答案 0 :(得分:0)

我自己就解决了这个问题!也许这可能会有所帮助:

控制器中的功能:

var timeoutMsg = function() {
    vm.$parent.notification = false;
 };

我的服务中的功能(我必须从我的控制器传递$ timeout以及该功能的名称,现在它可以正常工作):

// original broken code:
// this.modalSend = function(vm) {

// fixed:
this.modalSend = function(vm, $timeout, timeoutMsg) {

    vm.$parent.sendTransaction = function() {

        // Show notification
        vm.$parent.message = 'Transaction sent!';
        vm.$parent.notification = true;
        $timeout(timeoutMsg, 4000);

        // original broken code:
        // $timeout(timeoutMsg(), 4000);
    };
}

var vm = $scope