从 Angular JS 中的指令调用控制器函数

2024-03-30

我现在正在使用 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();
                        }
                    })
                }
            }
        });

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

参考资料 http://plnkr.co/edit/h0oGnBsazKxkPpALDR4f?p=preview

我的实际要求是当滚动到达末尾时,剩余的记录必须显示在预先输入中


对指令进行这些更改,在指令中添加 callBack 范围变量,并在 HTML 中添加 callBack 属性,输入函数

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

<div ul callBack="functionName"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 Angular JS 中的指令调用控制器函数 的相关文章