繁体   English   中英

AngularJs出厂时的呼叫控制器功能

[英]AngularJs call controller function from factory

我正在尝试sample with angularJssample with angularJs尝试call a factory method并且在工厂方法中,我正在执行ajax callback以从数据库获取结果,并且在ajax回调的success event中,我需要调用function in the controller中的一个将result to the UI绑定result to the UIfunction in the controller

我的角度代码:

 angular.module('myApp.controllers', []) .controller('TasksListCtrl', ['$scope', '$rootScope', '$routeParams', 'Task', function($scope, $rootScope, $routeParams, Task) { debugger; //factory call Task.query({ MobileNumber: $routeParams.MobileNumber, ClientCode: $routeParams.ClientCode }); $rootScope.UserMobileNumber = $routeParams.MobileNumber; $scope.BindTasksList = function(resultData) { debugger; $scope.Tasks = resultData; $scope.$apply(); } } ]); 

我的角度工厂代码:

 'use strict'; (function() { function GetTasks(MobileNumber, ClientCode) { debugger; $.ajax({ url: '/api/TasksAPI/GetTasksList', type: 'GET', datatype: 'json', data: { 'MobileNumber': MobileNumber, 'ClientCode': ClientCode }, success: function(response) { debugger; $scope.BindTasksList(response); }, error: function(xhr) {} }); }; angular.module('myApp.DbScripts', []) .factory('Task', [ function() { return { query: function(data) { debugger; GetTasks(data.MobileNumber, data.ClientCode); } } } ]); }()); 

我的app.js代码:

 'use strict'; angular.module('myApp', [ 'ngTouch', 'ngRoute', 'ngAnimate', 'myApp.controllers', 'myApp.DbScripts' ]). config(['$routeProvider', function($routeProvider) { debugger; $routeProvider.when('/tasks/:MobileNumber/:ClientCode', { templateUrl: 'partials/tasks-list.html', controller: 'TasksListCtrl' }); $routeProvider.when('/tasks/:taskId', { templateUrl: 'partials/task-details.html', controller: 'TaskDetailCtrl' }); $routeProvider.when('/tasks/:taskId/status', { templateUrl: 'partials/task-completion-details.html', controller: 'TaskCompletionDetailCtrl' }); $routeProvider.when('/tasks/:taskId/route', { templateUrl: 'partials/route-details.html', controller: 'RouteDetailCtrl' }); $routeProvider.otherwise({ redirectTo: '/tasks' }); } ]); 

但是,我无法在控制器中调用该函数。 我也尝试过使用angular.element(document.getElementById('TasksListCtrl')).scope().BindTasksList(response) 但是,即使那样也不起作用。

谁能指出我的错误?
如何将控制器的$ scope发送到工厂?

您可以利用$http承诺来做到这一点,在工厂中,按如下方式返回承诺

'use strict';

(function() {

  function GetTasks(MobileNumber, ClientCode) {

  };

  angular.module('myApp.DbScripts', [])
    .factory('Task', [
      function($http) {
        return {
          query: function(data) {
           return $http({
                   url: '/api/TasksAPI/GetTasksList',
                   method: 'GET',
                   params: {
                            'MobileNumber': data.MobileNumber,
                            'ClientCode': data.ClientCode
                           }
                }).then(function(result) {
                   return result;
                });
          }
        }
      }
    ]);
}());

然后,在您的控制器中,您可以访问返回的$http响应对象:

      //factory call
      Task.query({
        MobileNumber: $routeParams.MobileNumber,
        ClientCode: $routeParams.ClientCode
      }).then(function(resp) {
           // access $http resp here and attach to $scope.Tasks
      });

如果可以的话,我也建议在$http$q一起使用$q ,这样就不需要解析HTTP响应并获得一个不错的响应数据对象

nk

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM