angularjs - 从 Angular JS 中的指令调用 Controller 函数

Question

我现在正在使用 Angular JS，在我正在使用 ui-bootstrap typeahead

我正在尝试在预先输入中按需滚动逻辑

我已经试过了:

HTML:

  <div class='container-fluid' ng-controller="TypeaheadCtrl">
        <pre>Model: {{selected| json}}</pre>
        <input type="text" ng-model="selected" maxlength="5" typeahead="country.name for country in countries | filter:$viewValue | limitTo:8">
    </div> 

JS:

angular.module('plunker', ['ui.bootstrap'])
            .controller('TypeaheadCtrl', function ($scope) {

                $scope.selected = undefined;
                $scope.countries = [
                  { name: "Afghanistan", code: "AF" },
                  { name: "Aland Islands", code: "AX" },
                  { name: "Albania", code: "AL" },
                  { name: "Algeria", code: "DZ" },
                  { name: "American Samoa", code: "AS" },
                  { name: "Andorra", code: "AD" },
                  { name: "Angola", code: "AO" },
                  { name: "Anguilla", code: "AI" },
                  { name: "Antarctica", code: "AQ" },
                  { name: "Antigua and Barbuda", code: "AG" },
                  { name: "Argentina", code: "AR" },
                  { name: "Armenia", code: "AM" },
                  { name: "Aruba", code: "AW" },
                  { name: "Ascension Island", code: "AC" },
                  { name: "Australia", code: "AU" },
                  { name: "Austria", code: "AT" },
                  { name: "Azerbaijan", code: "AZ" },
                  { name: "Bahamas", code: "BS" },
                  { name: "Bahrain", code: "BH" },
                  { name: "Bangladesh", code: "BD" },
                  { name: "Barbados", code: "BB" },
                  { name: "Belarus", code: "BY" },
                  { name: "Zimbabwe", code: "ZW" }
                ];


                $scope.call= function(){
                  alert('reached end');

                  };

            })

            .directive('ul', function () {
            return {
                restrict: 'E',
                link: function ($scope, element, attrs) {
                    element.bind('scroll', function (e) {
                        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                           // alert('end reached');

                            $scope.call();
                        }
                    })
                }
            }
        });

但在上面的 try 中，$scope.call(); 函数没有调用。任何人都请帮助我

REFERENCE PLUNKER

我的实际要求是当滚动到最后时，剩余的记录必须显示在 typeahead 中

Answer 1

对您的指令进行这些更改，在指令中添加一个 callBack 范围变量并在 HTML 中添加一个 callBack 属性，键入函数

.directive('ul', function () {
                return {
                    restrict: 'E',
                    scope: {
                       callBack:"&"
                    }
                    link: function (scope, element, attrs) {
                              scope.callBack();
                         })
                    }
                }

<div ul callBack="functionName"></div>