Question

从指令中提示以生成控制器的方法。指令

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

<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是主要的应用程序模块

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

要从中调用方法的控制器在单独的文件中描述并通过require

连接

const SelectedByGenreModule = require('../controllers/selectedByGenre.controller.js')

并作为依赖项传递给主模块

所以我需要在这个控制器中调用指令中的方法。告诉我如何正确地做到这一点。我通过$ rootScope离开了，但它没有成功据我所知，该指令的范围与它所在的控制器的范围相同。也就是说，该指令位于控制器中，该控制器是您需要从中调用该方法的控制器的父级。

Answer 1

听起来您希望指令触发控制器定义的操作。我建议通过scope属性将函数传递给指令。请参阅下面的示例。

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>

Answer 2

在定义指令时，您可以要求使用require属性的父控制器，^^告诉angular查找父级的DOM，否则它只会查看本地元素。

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

AngularJS从指令调用控制器方法

2 个答案: