Angular 指令控制器最佳实践答案

【问题标题】：Angular Directive Controller best practiceAngular 指令控制器最佳实践
【发布时间】：2015-09-08 12:45:18
【问题描述】：

哪一种是定义指令控制器的最佳方式。我提到了一些他们解释 Option1 的网站。

选项 1：

angular.module('app')directive('AppHeader', AppHeader);

function AppHeader() {
  var headerDirective = {
     restrict: 'E',
     templateUrl: 'header.html',
     link: linkFunc, 
     controllerAs: 'vm',
     controller: NavCtrl
   };
   return headerDirective;

   function linkFunc(scope, element, attrs) {
      /* */
   }
}

NavCtrl.$inject = ['$scope', 'Service'];
function NavCtrl($scope, Service) {
    var vm = this;
    /* Controller actions */
}

以上代码中Controller与指令功能块分离。

选项 2：

 angular.module('app').directive('AppHeader', AppHeader);

 function AppHeader() 
 {
     var headerDirective = {
        restrict: 'E',
        templateUrl: 'header.html',
        link: linkFunc, 
        controllerAs: 'vm',                
        controller: NavCtrl
      };

     return headerDirective;

     function linkFunc(scope, element, attrs) {
        /* */
     }
     NavCtrl.$inject = ['$scope', 'Service'];
     function NavCtrl($scope, Service) {
        var vm = this;
        /* Controller actions */
     }
}

在上面的代码中Controller添加在指令功能块中。

那么哪一个是创建和定义指令控制器的最佳实践以及为什么。提前致谢。

【问题讨论】：

标签： javascript angularjs angularjs-directive controller

【解决方案1】：

关于选项 2，您已将功能范围限定为您实际使用的级别。

在选项 1 中，您已将函数的范围设置为更高级别，无需再将其设置为更高级别，因为它不会被重用。

我觉得选项 2 使函数的范围正确。

您可能还想将整个选项 2 代码包含在 IIFE（立即调用的函数表达式）中

(function(){
   //Your code here

})();

【讨论】：

【解决方案2】：

您应该选择选项 1，因为。

指令的控制器应该在指令的闭包之外。通过这种方式，您可以消除在返回后将注入创建为无法访问的代码的可能问题。

您应该阅读 John Papa 的 style guide，他解释了有关 Angular 代码样式的各种事情。

【讨论】：