モジュールからのAngularJSのスコープ付き機能

Question

この質問は以前に尋ねられたと確信していますが、検索するのに苦労しています。

ページャー、トグル、フィルターなどの定型コードがたくさんあるアプリがあります。これらのことを過度のような指示にすることは望ましくありません。現在、私はHTMLをなくすためにng-includeを使用していますが、私のディレクティブではまだ定型的なスコープ付きの関数がたくさんあります。

私が知りたいことは、これらの機能をモジュールからロードしてスコープに自動的にバインドできるかどうかです。

今私は、この持っている：私はもっとこのような何かをしたい

.directive('somethingAwesome', ['$http', '$timeout', function($http, $timeout) { 
    return { 
     replace: true, 
     templateUrl: '/assets/awesome_sauce.html', 
     transclude: false, 
     scope: true, 
     controller: ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { 
      // Public Functions List 
      $scope.next = next; 
      $scope.prev = prev; 
      $scope.filter = filter; 
      // ... 

      // Public Functions Definitions 
      function next() { 
       // Do something 
      } 
      function prev() { 
       // Do something 
      } 
      function filter() { 
       // Do something 
      } 
      // ... 
     }] 
    } 
}]) 

を：

.directive('somethingAwesome', ['$http', '$timeout', function($http, $timeout) { 
    return { 
     replace: true, 
     templateUrl: '/assets/awesome_sauce.html', 
     transclude: false, 
     scope: true, 
     controller: ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { 
      include boilerplate; 
     }] 
    } 
}]) 

(function boilerplate() { 
    // Public Functions List 
    $scope.next = next; 
    $scope.prev = prev; 
    $scope.filter = filter; 
    // ... 

    // Public Functions Definitions 
    function next() { 
     // Do something 
    } 
    function prev() { 
     // Do something 
    } 
    function filter() { 
     // Do something 
    } 
    // ... 

    return something; 
})() 

ここで重要なのは、単にboilerplate含むことは何でもの範囲にすべての機能を結合することです指令またはコントローラに含まれています。私はまだboilerplateから各機能をスコープに手作業でバインドしなければならない場合でも、このようなものは多くのコードを書き換えてしまうので、まだ有用です。

これは可能ですか？あれば、どうですか？

Answer 1

別の、おそらくより多くの角度/ OOPの方法：

.directive('somethingAwesome', ['$http', '$timeout', function($http, $timeout) { 
 
    return { 
 
     replace: true, 
 
     templateUrl: '/assets/awesome_sauce.html', 
 
     transclude: false, 
 
     scope: true, 
 
     controller: ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { 
 
      boilerplate($scope); 
 
     }] 
 
    } 
 
}]) 
 

 
function boilerplate($scope) { 
 
    // Public Functions List 
 
    $scope.next = next; 
 
    $scope.prev = prev; 
 
    $scope.filter = filter; 
 
    // ... 
 

 
    // Public Functions Definitions 
 
    function next() { 
 
     // Do something 
 
    } 
 
    function prev() { 
 
     // Do something 
 
    } 
 
    function filter() { 
 
     // Do something 
 
    } 
 
    // ... 
 

 
    return something; 
 
}

以上の角度の方法は、サービス/ファクトリを作成することです $controllerを使用してベース/「ボイラープレート」コントローラから継承することです。これには、コントローラごとに異なる依存関係を使用できるという利点があります（つまり、ボイラープレートに $httpが必要だが実際のコントローラではない場合はコントローラに $httpを注入して定型文に渡す必要はありません）。

この

は、コントローラを拡張する方法の例である（定型コントローラは、その後、継承コントローラが初期化されていることに注意してください最後に、継承コントローラが $scope.next()を呼び出すことができます。）：

angular.module('app', []) 
 
.controller('main', function() {}) 
 
.controller('baseController', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { 
 
    console.log('boilerplate controller init'); 
 
    $scope.next = function() { 
 
    console.log('next called'); 
 
    }; 
 
}]) 
 
.controller('awesomeController', ['$scope', '$controller', function($scope, $controller) { 
 
    $controller('baseController', {$scope: $scope}); 
 
    console.log('awesome controller init'); 
 
    $scope.next(); 
 
}]) 
 
.directive('somethingAwesome', ['$http', '$timeout', function($http, $timeout) { 
 
    return { 
 
     replace: true, 
 
     template: '<p>/assets/awesome_sauce.html</p>', 
 
     transclude: false, 
 
     scope: true, 
 
     controller: 'awesomeController' 
 
    } 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="main"> 
 
    <div something-awesome></div> 
 
</div>

Answer 2

ボイラープレート機能に$ scopeを渡すことはできますか？これを行うための

.directive('somethingAwesome', ['$http', '$timeout', 'boilerPlate', function($http, $timeout, boilerPlate) { 
 
    return { 
 
     replace: true, 
 
     templateUrl: '/assets/awesome_sauce.html', 
 
     transclude: false, 
 
     scope: true, 
 
     controller: ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { 
 
      boilerplate.setPagination($scope); 
 
     }] 
 
    } 
 
}]) 
 

 
.factory('boilerPlate', [function(){ 
 
    
 
    return { 
 
     setPagination: function($scope){ 
 
     // Public Functions List 
 
     $scope.next = next; 
 
     $scope.prev = prev; 
 
     $scope.filter = filter; 
 
     // ... 
 

 
     // Public Functions Definitions 
 
     function next() { 
 
      // Do something 
 
     } 
 
     function prev() { 
 
      // Do something 
 
     } 
 
     function filter() { 
 
      // Do something 
 
     } 
 
     // ... 
 
     } 
 
    } 
 
}]);