2016-09-29 85 views
0

我加入一些代碼來阻止用戶交互,而角$ HTTP請求正在進行:訪問angularjs服務

controller.js:

var app = angular.module("my_app", ["my_app"]); 
app.controller("MyController", ['$scope', '$http', function($scope, $http) { 
    $scope.blocking = false; 
    $scope.do_something = function() { 
    $scope.blocking = true; 
    $http({ 
     method: "POST", 
     url: "some.url.com", 
     data: my_data 
    }).success(function(data) { 
     // do something nice 
    }).error(function(data) { 
     // do some error handling 
    }).finally(function() { 
     $scope.blocking = false; 
    }); 
    }; 
}]); 

template.html:

<div ng-controller="MyController"> 
    <fieldset ng-disabled="blocking"> 
    <form> 
     ...a bunch of form elements... 
     ...including a "submit" button... 
     ...some of which call "do_something" above... 
    </form> 
    </fieldset> 
</div> 

當我運行「do_something」 FN這個正確設置「堵」爲真它具有防止字段集內所有用戶交互的效果。萬歲。

然而,我的代碼需要做這樣的事情很多。於是,我就功能移動到服務:

service.js:

app.factory('$my_service', ['$http', function($http) { 
    _blocking = false; 
    return { 
    getBlocking: function() { 
     return _blocking; 
    }, 
    setBlocking: function(blocking) { 
     _blocking = blocking; 
    } 
    } 
}]); 

然後我的 「do_something」 fN以上簡單的調用$ my_service.setBlocking需要。但是,我不知道應該爲ng-disabled的參數放置什麼。

有什麼建議嗎?


按照要求通過@ user449689,這裏是新的控制器代碼:

app.controller("MyController", ['$scope', '$http', '$my_service', function($scope, $http, $my_service) { 
    $scope.do_something = function() { 
    $my_service.setBlocking(true); 
    $http({ 
     method: "POST", 
     url: "some.url.com", 
     data: my_data 
    }).success(function(data) { 
     // do something nice 
    }).error(function(data) { 
     // do some error handling 
    }).finally(function() { 
     $my_service.setBlocking(false); 
    }); 
    }; 
}]); 

但我想不出要放什麼東西在fieldset元素的「NG禁用」屬性。

+0

我們展示您撥打服務 – user449689

回答

1

控制器上只需更新$scope.blocking參考service方法$my_service.getBlocking和更新HTML到

<fieldset ng-disabled="blocking()"> 

在控制器

$scope.blocking = $my_service.getBlocking 
+0

d新代碼'哦!這很簡單。非常感謝您的幫助。 – trubliphone