为什么Angular不能在外部文件上找到指令的控制器?

时间:2015-09-04 15:17:26

标签: javascript angularjs

我是Angular的新手,我很难跟上John Papa's guidelines。他的片段告诉我将我的控制器逻辑放在我的指令中,但这对我来说没有意义。我自己尝试过这样做,而且我似乎无法让它以这种方式工作,但我认为这不是最佳的,因为我不能将我的控制器整齐地分离在他自己的文件上,我必须让我的.directive.js变得更大更笨拙。我还没有找到一个例子,其中某人没有使用控制器逻辑 - 指令内部。

这就是我要做的...... 这是我的funcionario-list-all.directive.js:

(function() {
    'use strict';

    angular.module('i9t.funcionario').directive('i9tFuncionariosListAll',
            funcionariosListAll);

    //directive.$inject = [];

    /* @ngInject */
    function funcionariosListAll() {
        // Usage:
        //
        // Creates:
        //
        var directive = {
            bindToController : true,
            templateUrl : 'funcionario-listall.html',
            controller : FuncionarioController,
            controllerAs : 'funcCtrl',
            restrict : 'AE'
        };
        return directive;
    }

//  angular.module('i9t.funcionario').controller('FuncionarioController',
//          FuncionarioController);
//  FuncionarioController.$inject = [ '$scope', '$http' ];
//
//  /* @ngInject */
//  function FuncionarioController($scope, $http) {
//      // Why do i need to do this...
//      var vm = this;
//      vm.funcionarios = [];
//      // To make this expression execute when the page loads?
//      $http.get("./funcionario/listarFuncionarios").then(function(data) {
//          vm.funcionarios = data.data;
//      });
//      vm.updateFuncionario = updateFuncionario;
//      // //////////////
//
//      function updateFuncionario(funcId) {
//          vm.funcionarios = [ {
//              id : 1,
//              nome : 'papillon',
//              endereco : 'Saint-Martin-de-Ré'
//          }, {
//              id : 2,
//              nome : 'montressor',
//              endereco : 'La Rochelle'
//          } ];
//      }
//  }

})();

找不到我的控制器,它被定义为funcionario.controller.js并且具有该注释代码。如果我不能将控制器逻辑放在指令上,它将无法工作,但我希望将它全部分开,因为当它变大时,我就不需要改变指令(太多了,至少)。它们位于同一文件夹中,我在同一文件夹的i9t.funcionario上声明funcionario.module.js模块。我应该在指令中注入控制器吗?为控制器制作一个单独的模块?我试过了,但它没有用。 我正在使用Angular 1.4.4,只是从CodeSchool和Thinkster学到它,所以我可能会在没有意识到的情况下犯下一些愚蠢的错误!

1 个答案:

答案 0 :(得分:3)

您正在在具有角度的单独文件中注册您的控制器。该文件的范围不同,因此,在初始化指令的地方没有定义变量名FuncionarioController

Angular允许您像在funcionario.controller.js中一样在模块中注册控制器,并且您已将其命名为'FuncionarioController'。该字符串名称不一定必须是实现控制器的函数的名称(也可以是匿名函数)。因此,您也可以将其命名为'foo'

现在,为了告诉angular您想要访问该控制器,您可以使用您注册的名称。这类似于将$scope$http注入控制器的方式;它们也仅仅是以角度登记的服务。

在您的特定示例中,您还可以将name作为参数controller传递(在您的情况下为FuncionarioController,但也可能是foo) 。因此,这应该对你有用:

function funcionariosListAll() {
    // Usage:
    //
    // Creates:
    //
    var directive = {
        bindToController : true,
        templateUrl : 'funcionario-listall.html',
        controller : 'FuncionarioController', // <-- string here
        controllerAs : 'funcCtrl',
        restrict : 'AE'
    };
    return directive;
}