How to call controller function from directive in angular js ?

Question

I am opening a dialog-box on click of button.I want to add endless scroll in that.

Problem:

When user scrolls at the end of dialog-box i want to call addMoreData() written in controller.

HTML of Dialog-box:

 <modal-dialog show='modalShown' width='60%' height='325px' >
   <div id='diaogContainer'>
     <p>Modal Content Goes here<p>
   </div>
</modal-dialog>

Controller:

sampleApp.controller('view3Controller', function($scope) {
     $scope.modalShown = false;
     $scope.toggleModal = function() {
         $scope.modalShown = !$scope.modalShown;
     } 
     **$scope.showMore = function(){
       console.log('showMore');
     }**
   });

Directive of Dialog-box:

 sampleApp.directive('modalDialog', function() {
   return {
   restrict: 'E',
   scope: {
       show: '='
   },
   replace: true, // Replace with the template below
    transclude: true, 
    link: function(scope, element, attrs) {
    scope.dialogStyle = {};
    if (attrs.width)
        scope.dialogStyle.width = attrs.width;
    if (attrs.height)
        scope.dialogStyle.height = attrs.height;
        scope.hideModal = function() {
        scope.show = false;
    };
 },
 template: "<div class='ng-modal'  ng-show='show'><div class='ng-modal-overlay'ng-click='hideModal()'></div><div class='ng-modal-dialog' hello **scrolly='showMore()'** ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
  };
});

Directive to load more data:

 sampleApp.directive('hello', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var raw = element[0];
        element.bind('scroll', function () {
            console.log(raw.scrollTop +'-------'+raw.offsetHeight+'----'+raw.scrollHeight);
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
            // here is problem
            // I am not able to call function through this attr
            //
           **scope.$apply(attrs.scrolly);**
            }
        });
    }
  };
});

Answer 1

you can try like this.

Directive part

var module = angular.module('direc');
module.directive("direcApp", ['$timeout', function ($timeout) {

    return {
        restrict: 'E',
        templateUrl: "template/template.html",
        compile: function (iel, iattr) {


            return function (scope, el, attr) {

            }
        },
        scope: {
            type: "@",
            items: '=',
            onClick: '&',
            val: "="
        },
        controller: function ($scope) {


            $scope.selectItem = function (selectedItem) {
                $scope.val = selectedItem;
                if (angular.isFunction($scope.onClick)) {
                    $timeout($scope.onClick, 0);
                }
            };
        }

    };

}]);

Controler part

var app = angular.module('app', ['direc']);
app.controller("appCtrl", ['$scope', '$http', function ($scope, $http) {

    var t = {
        count: function () {
            return $scope.$$watchersCount; // in angular version 4 get total page listener
        },
        val1: "",
        onClick: function () {
            console.log($scope.data.val1);
        },
        items: [{ text: 'Seçenek 1', value: '1' },
        { text: 'Seçenek 2', value: '2' },
        { text: 'Seçenek 3', value: '3' },
        { text: 'Seçenek 4', value: '4' },
        { text: 'Seçenek 5', value: '5' }]
    };
    angular.extend(this, t);

}]);

Html part

<div ng-controller="appCtrl as data">

            <div><b>Watcher Count : {{data.count()}}</b></div>
            <direc-app items="data.items"
                             val="data.val1"
                             on-click="data.onClick1()"
                           >
            </selection-group>
        </div>

Answer 2

You can't pass in a function to a directive through an attribute, you can however pass it through an isolate scope. Pass a reference to the function you wish to call to the directive:

 sampleApp.directive('hello', function () {
  return {
    restrict: 'A',
    scope:{
     onScrollEnd:'&'
    },
    link: function (scope, element, attrs) {
        var raw = element[0];
        element.bind('scroll', function () {
            console.log(raw.scrollTop +'-------'+raw.offsetHeight+'----'+raw.scrollHeight);
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
               scope.onScrollEnd();
            }
        });
    }
  };
});

Now assuming you have the addMoreData() function defined on your controller, you can pass it to the directive this this:

<div hello on-scroll-end='addMoreData()'></div>

EDIT

I think the problem is that the hello directive can't access functions on the parent controller since the modalDialog directive is using an isolated scope, therefore making everything o the parent controller invisible. Pass the function to through the isolate scope of the modalDialog Directive as well:

   scope: {
       show: '=',
       onScrollEnd:'&'
   },

Answer 3

1. Add data as parameter to directive: scope: { data: '='}, and in directive just data.push({name:'i am new object'})

2. Add function parameter to directive as suggested in previous answer.