Call Controller function from the directive in angular JS

Question

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

I am trying scroll on demand logic in typeahead

i have tried this:

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();
                        }
                    })
                }
            }
        });

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

REFERENCE PLUNKER

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

byteC0de · Accepted Answer · 2016-05-02 09:53:28Z

2

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>

edited May 2, 2016 at 9:53

answered May 2, 2016 at 9:32

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Suganth G Over a year ago

if i change my directive means then how can i achieve scroll functionality

Suganth G Over a year ago

i agree with your answer but the html is rendering dynamically, how can i add the attribute like above ?

byteC0de Over a year ago

you can add your own attribute, what you want

Suganth G Over a year ago

can you understand my comment ? in typeahead, the dropdown html ul is rendering dynamically, which means it will come when i type in the textbox, at that time only the HTML will come, so how can i give attribute to that html ?

byteC0de Over a year ago

go through this question stackoverflow.com/questions/21687925/…

Collectives™ on Stack Overflow

Call Controller function from the directive in angular JS

REFERENCE PLUNKER

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related