AngularJS服务功能执行顺序

时间:2015-10-18 22:23:58

标签: javascript angularjs

我是AngularJS的新手。 我使用$ http.get创建了一个检索文件的服务,但我无法弄明白 如何控制何时执行服务功能。

我的控制器功能已注入服务。

首次加载页面时,首先调用服务功能。 相反,我希望在单击按钮后调用服务功能。

或许我不应该使用服务功能?

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

app.controller("myCtrl", function($scope, $http, myService) {
    
    $scope.searchValues = function () {
        $scope.value = "search.json";
        myService.setValue($scope.value);
        console.log(" in searchValues " + $scope.value);
    };
});


app.service("myService", function($http, $q) {
    var deferred = $q.defer();
    var value ;

    this.setValue = function(valueSelected) {
        console.log("in service:  " + valueSelected);
        value = valueSelected;
    };

    $http.get('http://juubaker.github.io/' + value).then(function(data) {
        console.log("in service 2:  " + value);
        deferred.resolve(data);
    });


    this.getValue = function() {
        return deferred.promise;
    };
});

由于

1 个答案:

答案 0 :(得分:0)

您的服务看起来完全没问题。只是不要立即在控制器中调用myService.setValue方法。而是创建一个通过ng-click

运行的方法
app.controller("myCtrl", function($scope, $http,  myService) {
  $scope.updateValue = function(){
    myService.setValue($scope.value);
  }
});

你的模板:

<input type="text" ng-model="value" />
<a ng-click="updateValue()">Save Value</a>

控制器方法中的逻辑在初始化该控制器后立即运行,这就是您遇到此问题的原因。