javascript - 如何在指令中访问 Controller (从外部文件)的范围？

Question

我的 Controller 位于一个名为controller.js的单独文件中，并且我的app.js设置如下

angular.module('WeCompeteApp', [
    'WeCompeteApp.controllers',
    'WeCompeteApp.services',
    'WeCompeteApp.utilities',
    'WeCompeteApp.filters',
    'ui.router',
    'ngSanitize'
])

因此，我的 Controller 文件中有一个名为 ChallengesController 的 Controller ，我试图将其包含在指令中以访问其功能之一。

我的指令看起来像

.directive('whenScrolled', ['$http', function($http) {

    return {
        restrict: 'A',
        controller: 'ChallengesController',
        scope: {
            challenges: '=',
            page: '=',
            filter: '='
        },
        link: function(scope, elm, attr, ChallengesCtrl) {

            var raw = elm[0];

            elm.bind('scroll', function() {

                if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {

                    console.log('scrolled to bottom');

                    if (scope.challenges.length >= 20) {

                        ChallengesCtrl.getChallenges(scope.page, 20, scope.filter);

                    }

                }

            });

        }

    };

}]);

但是当我尝试运行该函数时，我发现 ChallengesCtrl 未定义，因此我不确定它是否设置正确。非常感谢任何帮助，如果需要更多信息，请直接说出来。

Answer 1

您的链接和 Controller 共享相同的范围:

从link中删除ChallengesCtrl的注入(inject)并更改:

ChallengesCtrl.getChallenges(scope.page, 20, scope.filter);

致

scope.getChallenges(scope.page, 20, scope.filter);

唯一一次在 link 中进行 Controller 注入(inject)是当您需要另一个指令 Controller 时