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

Question

我是Angular的新手，我很难过John Papa's guidelines。他的片段告诉我把我的控制器逻辑放在我的指令中，但这对我没有意义。我尝试过自己做，而且我似乎也不能这样做，但我认为这不是最优的，因为我不能让我的控制器整理在他自己的文件中，而且我必须让我的.directive.js变得更大更笨重。我还没有找到一个有人没有使用控制器 - 逻辑 - 指令的例子。

这里就是我试图做... 这是我funcionario一览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和有评论的代码。如果我不能将控制器逻辑放在指令上，它将不起作用，但我希望将它们全部分开，当它变得更大时，然后我不需要改变指令（太多了，至少）。他们位于同一个文件夹中，并且我在同一个文件夹上的funcionario.module.js上声明i9t.funcionario模块。我是否应该在指令中注入控制器以使其工作？为控制器制作一个单独的模块？我试过了，但没有奏效。 我使用的是Angular 1.4.4，刚刚从CodeSchool和Thinkster那里学到了，所以我可能会在没有意识到的情况下犯下一些愚蠢的错误！

Answer 1

你是注册你的控制器在一个单独的文件与角。该文件的作用域不同，因此变量名称FuncionarioController未定义在指令被初始化的位置。

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

现在，为了告诉角度，您要访问该控制器，您可以使用名称您注册。这与您如何将$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; 
}