如何从角度js中调用控制器函数?

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.

当用户在对话框末尾滚动时，我想调用写在控制器中的addMoreData()。

HTML of Dialog-box:

HTML的对话框:

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

3 个解决方案

#1

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:

现在假设您的控制器上定义了addMoreData()函数，您可以将它传递给指令如下:

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

< div你好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:

我认为问题在于hello指令不能访问父控制器上的函数，因为modalDialog指令使用的是一个独立的范围，因此父控制器的所有操作都是不可见的。将函数传递给modalDialog指令的隔离范围:

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

#2

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

Html的一部分

<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>

#3

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

将数据作为参数添加到指令:作用域:{data: '='}，在指令中只添加数据。push({名称:“我新对象”})
Add function parameter to directive as suggested in previous answer.

按照前面的答案向指令添加函数参数。

#1