Home AngularJS Calling the controller method from directive
Reply: 2

AngularJS Calling the controller method from directive

Санитариум
1#
Санитариум Published in 2018-02-13 17:15:35Z

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 file and connects via require

const SelectedByGenreModule = require('../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 out As 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.

UncleDave
2#
UncleDave Reply to 2018-02-13 17:31:39Z

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>

Jake Holzinger
3#
Jake Holzinger Reply to 2018-02-13 17:31:49Z

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 here
        link: 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 
                }
            })
        }
    }
});
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 1.018388 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO