Question

我正在尝试sample with angularJs我尝试call a factory method并且在工厂方法中，我正在做ajax callback以获得结果数据库和ajax回调的success event中，我需要调用function in the controller来绑定result to the UI。

我的角色代码：

＆＃13;

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();
      }

    }
  ]);

＆＃13;

我的角度工厂代码：

＆＃13;

'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);
          }
        }
      }
    ]);
}());

＆＃13;

我的app.js代码：

＆＃13;

'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'
    });
  }
]);

＆＃13;

但是，我无法在控制器中调用该功能。我还试过angular.element(document.getElementById('TasksListCtrl')).scope().BindTasksList(response)。但即便这样也不行。

任何人都可以指出我正在做的错误吗？如何将控制器的$范围发送到工厂？

Answer 1

您可以通过利用$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
      });

如果可以的话，我会主张在$q上使用$http，这样你就不需要解析http响应并获得一个漂亮的小响应数据对象

plnk

AngularJs从工厂调用控制器功能

1 个答案: