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; 
}