Angularjs,为什么这项服务会自动执行?

时间:2014-02-11 17:18:28

标签: javascript angularjs

以下代码只有在用户点击后才会触发'ei'警报,但事实并非如此。警报出现在开头。为什么?以及如何解决?我不遵循这里的逻辑(评论我的新人身份)

http://jsfiddle.net/yDhv8/4/

上查看

HTML

<div ng-controller='StartAnalysis' ng-click="Process()">
{{status}} CLICK HERE TO START PROCESSING
</div>

JS

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

angular.module('myApp').controller('StartAnalysis', 
['$scope', 'Erase_added_panels', function ($scope, Erase_added_panels) {

$scope.status = 'waiting files ...';

$scope.Process = function() {
    alert('mm')
    Erase_added_panels;
    $scope.status = 'starting process ...';
    return false;
}
}]);

angular.module('myApp').factory('Erase_added_panels', function() {
    alert('ei')
    return true;
});

干杯,

2 个答案:

答案 0 :(得分:8)

您正在申报工厂,因此这是一个执行的单身人士:

angular.module('myApp').factory('Erase_added_panels', function() {
    alert('ei')
    return true;
});

如果您想稍后触发警报,只需使用方法返回一个对象,执行您需要它执行的操作:

angular.module('myApp').factory('Erase_added_panels', function() {
    return {
        foo: function () {
            alert('ei')
            return true;
        }
    };
});

并称之为

angular.module('myApp')
.controller('BarController', ['Erase_added_panels', function (Erase_added_panels) {
    Erase_added_panels.foo();
}]);

注意:

Angular指定服务在您的应用程序中某处 时执行,这意味着将其添加为依赖项的简单事实使其执行。

Angular说(as stated here):

  

Angular中的所有服务都是懒惰地实例化的。这意味着一个   只有在实例化a时才会创建服务   服务或依赖于它的应用程序组件。其他   除非有要求,否则Angular不会实例化服务   直接或间接由申请。

答案 1 :(得分:1)

当您的应用程序加载(服务是单例)时,您提供给工厂方法的函数会被执行一次。

所以这段代码:

alert('ei')
    return true;

在初始化期间执行,以便创建您的服务。 因此,从此函数中,您应返回一个对象以在控制器中使用

如果要从服务中提醒某些内容,则应返回一个对象:

angular.module('myApp').factory('Erase_added_panels', function() {  
    return {
     alertUser : function(){
         alert('hey!');        
     };
});

然后从您的控制器中,您可以使用刚刚返回的对象来调用其方法:

angular.module('myApp').controller('StartAnalysis', 
['$scope', 'Erase_added_panels', function ($scope, Erase_added_panels) {

    $scope.status = 'waiting files ...';

    $scope.Process = function() {
        Erase_added_panels.alertUser();
    }
}]);

请阅读文档:http://docs.angularjs.org/guide/dev_guide.services.creating_services