AngularJS指令范围函数没有被调用答案

【问题标题】：AngularJS directive scope function not being calledAngularJS指令范围函数没有被调用
【发布时间】：2016-02-25 13:16:20
【问题描述】：

我创建了以下指令：

app.directive("autoLoad", function ($window) {
    return { 
        scope: {
            do: '&'
        },
        link : function(scope, element, attrs) {
            var scroller = element[0];
            angular.element($window).bind("scroll", function() {
                if(($(window).scrollTop() + $(window).height()) > ($(document).height() - 100)) {
                    console.log("GOT HERE!");
                    scope.do(); // LOAD POSTS
                }
            });
        }
    };
});

当用户滚动到页面底部时，该指令应该调用 do 函数。这是使用指令的 div：

<body ng-app="storeApp" layout="row" ng-controller="MainCtrl" ng-cloak">
...
<div flex layout="column" tabIndex="-1" role="main"
    class="md-whiteframe-z2" auto-Load do="doSomething()">

控制器如下所示：

app.controller("HomeCtrl", function($scope, controllerManager) {
    ...

    $scope.doSomething = function() {
        console.log("PLEASE WORK!");
    };
});

当我到达页面底部时，正在打印 GOT HERE，但第二条语句从未显示。为什么控制器中的函数没有被调用？

编辑：我正在使用选项卡，每个选项卡都有不同的控制器。所以应用到body对象的主控制器，其实里面并没有doSomething函数：

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('home', {
        url : "/home",
        templateUrl : "main.html",
        controller : 'HomeCtrl'
    }).state('top', {
        url : "/top",
        templateUrl : "main.html",
        controller : 'TopCtrl'
    }).state('trending', {
        url : "/trending",
        templateUrl : "main.html",
        controller : 'TrendingCtrl'
    })
    $urlRouterProvider.otherwise('/home');
});

app.controller("MainCtrl", function($scope, $location, $log) {
    $scope.selectedIndex = 0;
    $scope.$watch('selectedIndex', function(current, old) {
        switch (current) {
        case 0:
            $location.url("/home");
            break;
        case 1:
            $location.url("/top");
            break;
       case 2:
            $location.url("/trending");
            break;
        }
    });
});

do something 函数实际上是每个子控制器的一部分：HomeCtrl、TopCtrl 等。

问题似乎是范围是由 MainCtrl 定义的，而不是它当前所在的任何选项卡。怎么改？

【问题讨论】：

在body TAG中去掉ng-cloak之后的"
首先修复一些问题。在您的 HTML 中使用“自动加载”而不是“自动加载”，以正确的方式限制您的指令
查看此链接stackoverflow.com/questions/17583004/…
@CodeNashor 因为浏览器的工作方式，属性名称的大小写信息丢失了，所以实际上你可以使用auto-Load

标签： javascript angularjs

【解决方案1】：

首先，您确实需要为此使用服务或工厂，但如果您仍想使用表达式绑定，请将您的代码从链接函数移动到指令控制器（参见 jsbin https://jsbin.com/nohotizefi/edit?html,js,output）

 app.directive("autoLoad", function ($window) {
return { 
    scope: {
        do: '&'
    },
    controller : function($scope, $element) {
        var scroller = $element;
        angular.element($window).bind("scroll", function() {
            if(($(window).scrollTop() + $(window).height()) > ($(document).height() - 100)) {
                console.log("GOT HERE!");
                $scope.do(); // LOAD POSTS
            }
        });
    }
};

});

【讨论】：

这一行出现错误：var scroller = scope.el;说范围未定义。
它仍然只打印第一件事。我也试过 $scope.$eval($scope.do()).
我已经用一些相关信息编辑了这个问题。我正在使用多个控制器，这可能会改变一些事情。