从angular JS中的指令调用Controller函数 [英] Call Controller function from the directive in angular JS

问题描述

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

I am using angular JS right now, in the i am using ui-bootstrap typeahead

我正在尝试提前输入按需滚动逻辑

I am trying scroll on demand logic in 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();函数没有调用.任何人都可以帮助我

But in the above try $scope.call(); function is not calling. Any one pls help me

我的实际要求是，当滚动到达结尾时，其余记录必须提前输入

My actual requirement is when the scroll reaches the end, remaining records has to show in the typeahead

推荐答案

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

Make these changes to your directive, add a callBack scope variable in directive and add a callBack attribute in HTML , type function

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

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

这篇关于从angular JS中的指令调用Controller函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！