Question

我确定之前已经问过这个问题，但是我很难找到正确的搜索方法。

我有一个带有很多样板代码的应用程序，例如分页器，切换器，过滤器等。我不想把这些东西变成指令，因为这似乎有些过分。目前我正在使用ng-include来干掉我的HTML，但在我的指令中，我仍然有很多样板范围的函数。

我想知道的是，是否/如何从模块加载这些函数并让它们自动绑定到作用域。

现在我有这个：

.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

可以将$ scope传递给样板函数。

Error:(20, 22) inferred type arguments [Comparable[_]] do not conform to method sort's type parameter bounds [T <: Comparable[_ >: T]]
util.Collections.sort(table)
                 ^
Error:(20, 27) type mismatch;
 found   : java.util.ArrayList[Comparable[_]]
 required: java.util.List[T]
Note: Comparable[_] >: T, but Java-defined trait List is invariant in type E.
You may wish to investigate a wildcard type such as `_ >: T`. (SLS 3.2.10)
    util.Collections.sort(table)
                          ^

或更有棱角的方式是创建服务/工厂：

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

Answer 2

另一种可能更有角度/ OOP的做法是继承基础/＆＃34;样板＆＃34;控制器使用$controller。这样做的好处是可以让你为每个控制器使用不同的依赖关系（例如，如果你的样板需要$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' } }]);）：

＆＃13;

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

＆＃13;

.diagonal {width:700px; height:200px;}
.diagonal-black {float:left; background:black; width:50%; height:200px;}
.diagonal-blue {float:right; background:blue; width:50%; height:200px; position:relative;}
.diagonal-blue:after {position:absolute; content:""; width:0; top:0; left:-50px; height:0; border-bottom:200px solid transparent; border-right:50px solid blue;}

＆＃13;

AngularJS从模块加载范围函数

2 个答案: