Prompt as from a directive to cause a method of the controller.Directive

app.directive('scroll', function($location){return{restrict: 'A',link: function(scope, element, attrs){element.on('scroll', function(){let fh=$('#ngview').height();let nh=Math.round($(element).height() + $(element).scrollTop());if(fh==nh){//Here we do what we need }})}}});

HTML markup

<div class="col-md-12 middle-body" scroll><div ng-show="showUserModal" ng-include="'partial/loginModal.html'"></div><div class="user-loader" ng-show="loading"><div class="spinner"></div></div><div ng-view id="ngview"></div></div>

app is the main application module

var app=angular.module('app', ['ngRoute','lastUpdateModule','selectedByGenreModule','currentFilmModule','httpFactory','userModule','accountModule']);

The controller from which you want to call the method is described in a separate fileand connects via require

const SelectedByGenreModule=require('http://stackoverflow.com/controllers/selectedByGenre.controller.js')

and passed as a dependency to the main module

So it is from this controller that I need to call the method in the directive.Tell me how to do it correctly. I left through $rootScope but it did not work outAs far as I know, the directive has the same scope as the controller in which it is located. That is, the directive is in the controller which is the parent for the controller from which you need to call the method.

share|improve this question

    It sounds like you want your directive to trigger an action defined by your controller. I'd recommend passing the function to the directive via the scope property. See the example below.

    var app=angular.module('ExampleApp', []);app.directive('scroll', function($location) {return {restrict: 'A',scope: {scroll: '='},link: function(scope, element, attrs) {element.on('scroll', function() {let fh=$('#ngview').height();let nh=Math.round($(element).height() + $(element).scrollTop());if (fh==nh) {scope.scroll();}})}}});app.controller('ExampleCtrl', function($scope) {$scope.onScroll=function() {console.log('Scrolled!')};});
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div ng-app="ExampleApp" ng-controller="ExampleCtrl"><div class="col-md-12 middle-body" scroll="onScroll"><div ng-show="showUserModal" ng-include="'partial/loginModal.html'"></div><div class="user-loader" ng-show="loading"><div class="spinner"></div></div><div ng-view id="ngview"></div></div></div>

    share|improve this answer
    • At me visibility of the controller in which there is a necessary method is limited ng-view in parameter it is necessary to transfer above in a partitioning. Will this work?– СанитариумFeb 13 at 17:43
    • If the directive uses isolate scope, it should use expression '&' binding to call methods in a parent scope. That will make migration to Angular 2+ easier. For more informatiion, see AngularJS Developer Guide - Component-based application architecture.– georgeawgFeb 13 at 20:30

    You can require parent controllers using the require property when defining the directive, the ^^ tells angular to look up the DOM for a parent, otherwise it will only look on the local element.

    app.directive('scroll', function($location){return{restrict: 'A',require: '^^selectedByGenreCtrl', // Use the correct controller name herelink: function(scope, element, attrs, selectedByGenreCtrl){element.on('scroll', function(){let fh=$('#ngview').height();let nh=Math.round($(element).height() + $(element).scrollTop());if(fh==nh){//Here we do what we need }})}}});
    share|improve this answer

      Your Answer

       
      discard

      By posting your answer, you agree to the privacy policy and terms of service.

      Not the answer you're looking for? Browse other questions tagged or ask your own question.