问题：

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

对话框的HTML：

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

控制器：

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

对话框指令：

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

加载更多数据的指令：

 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

您不能通过属性将函数传递给指令，但是可以通过隔离范围传递它。将对要调用的函数的引用传递给指令：

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

现在假设你在控制器上定义了addMoreData()函数，你可以将它传递给指令：

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

修改

我认为问题是hello指令无法访问父控制器上的函数，因为modalDialog指令正在使用隔离范围，因此使父控制器的所有内容都不可见。将函数传递给modalDialog指令的隔离范围：

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

Answer 2

你可以这样试试。

指令部分

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

    };

}]);

控制器部分

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

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

将数据作为参数添加到指令：scope：{data：'='}，并在指令中只是data.push（{name：'我是新对象'}）
按照上一个答案中的建议将函数参数添加到指令。

如何从角度js中的指令调用控制器函数？

问题：

3 个答案: