Question

我第一次使用Angular JS开发，我正在编辑我朋友的应用程序。我会从另一个文件中的指令调用工厂。以下是涉及文件的代码：

用户-factory.js

(function() {
  'use strict';

  angular.module('myApp.services').factory('currUserService', function() {
    var curruser = '';
    var self = this;
    return {
      setCurrUser: function(user) {
          self.curruser = user;
      },
      getCurrUser: function() {
          return self.curruser;
      },
    }
  });


}());

炫魅用户-box.js

(function() {
  'use strict';

  angular.module('myApp.directives').directive('mainpageUsersBox', function() {
    return {
      restrict: 'E',
      replace: true,
      scope: {
          users: '=users'
        },
      templateUrl: 'views/templates/mainpage-users-box.directive.html',
      controller: controller,
      controllerAs: 'ctrl'
    };
  });

  function controller($scope) {
    var ctrl = this;

    ctrl.openProfile = function(user) {
      ctrl.currUserService.setCurrUser(user);
    };
  }

  controller.$inject = ['$scope'];

}());

mainpage.html

[...]
<mainpage-users-box users="ctrl.users"></mainpage-users-box>
[...]

正如您在第二个文件中看到的，我想使用.setCurrUser(user)方法，但是我收到此错误： TypeError：无法在Chrome控制台中读取未定义的属性'setCurrUser 。< / p>

你能帮我弄清楚原因是什么吗？

Answer 1

您似乎根本没有注入该服务：

// Where's the service?  
function controller($scope) {
    var ctrl = this;

    ctrl.openProfile = function(user) {
      ctrl.currUserService.setCurrUser(user);
    };
  }

  // Where's currUserService?
  controller.$inject = ['$scope'];

如果您将控制器更改为此功能，这是否会起作用？

function controller(currUserService) {
    var ctrl = this;

    ctrl.openProfile = function(user) {
      ctrl.currUserService.setCurrUser(user);
    };
  }

  controller.$inject = ['currUserService'];

您似乎使用controllerAs风格的书写控制器。在这种情况下，您不需要注入$scope，除非您要添加$watches。

如何从不同文件的指令调用工厂？

1 个答案: