Angular中指令对指令通信抛出错误

Directive to directive communication throwing error in Angular

本文关键字：指令 出错 错误 Angular 通信      更新时间：2023-09-26

如何将控制器暴露给另一个指令。最后，我希望有一个指令之间的沟通。使用slideshow指令编译对象。当有响应页指令时，更新幻灯片指令。首先我需要他们之间的沟通。

错误如下:

Error: [$compile:ctreq] Controller 'slideshow', required by directive 'responsivePage', can't be found!

查看JsFiddle上的实时代码

<div ng-app="myApp" id="weekly">
  <script type="text/ng-template" id="template1.html">
  <div class="weekly-viewport" responsive-page >
      <ul class="page-collection">
       <li class="page-layout" ng-repeat="page in pages">
            <ul class="page shop-local-page">
                <li class="imageurl"><img ng-src="{{page.imageurl}}" alt="" /></li>
            </ul>
        </li>
    </ul>
  </div>
  </script>
  <div ng-controller="MainCtrl" class="inner-weekly">
          <slideshow></slideshow>
  </div>
</div>

JS: 

var myApp = angular.module('myApp',[]);

myApp.controller('MainCtrl', function ($scope, Pages) {
   $scope.name = 'Superhero';
   $scope.pages = Pages;
});
myApp.directive('slideshow', function($window){
  return {
      restrict: 'E',
      templateUrl: 'template1.html',
      controller: function($scope, Pages) {
        $scope.adPageData = Pages;
        $scope.adpageLength = $scope.adPageData.length;
      },
      link: function postLink(scope, element, attrs) {
      }
  };
})
.directive('responsivePage', function(){
  return{
    restrict: 'A',
    require: 'slideshow',
    link: function postLink(scope, element, attrs, slideshowCtrl) {
       var targetRatio = 0.8419689;
       var pageCollectionWidth = angular.element(document.querySelector('.page-collection'))[0].offsetWidth;
       var pageCollectionHeight = angular.element(document.querySelector('.page-collection'))[0].offsetHeight;
       scope.properPageWidth = pageCollectionHeight*targetRatio;
       console.log();
    }
  }
});     
myApp.factory('Pages', function() {
   var Pages = {};
   Pages = [
     {
       'imageurl': 'http://placekitten.com/680/819',
       'imgWidth': 680,
       'imgHeight': 819
     },
     {
       'imageurl': 'http://placekitten.com/680/819',
       'imgWidth': 680,
       'imgHeight': 819
     },
     {
       'imageurl': 'http://placekitten.com/680/819',
       'imgWidth': 680,
       'imgHeight': 819
     }
   ]
   return Pages;
});

尝试require: '^slideshow'(注意^)在其祖先上查找slideshow控制器。

从文档

^前缀表示该指令搜索on的控制器它的父类(没有^前缀)，该指令将查找

希望我能帮到你。

可直接使用

myApp.directive('responsivePage', function(){
    return{
    restrict: 'A',
    link: function postLink(scope, element, attrs, slideshowCtrl) {
        console.log(scope.adPageData);
        console.log(scope.adpageLength);
       var targetRatio = 0.8419689;
       var pageCollectionWidth = angular.element(document.querySelector('.page-collection'))[0].offsetWidth;
       var pageCollectionHeight = angular.element(document.querySelector('.page-collection'))[0].offsetHeight;
       scope.properPageWidth = pageCollectionHeight*targetRatio;
       console.log();
}

}});

jsfiddle

的另一种用法
  myApp.directive('slideshow', function($window){
      return {
          restrict: 'E',
          name:'aa_aa',//controller alias
          templateUrl: 'template1.html',
          controller: function($scope, Pages) {
              this.x ='x'
         },
         link: function(scope, element, attrs) {
         }
      };
 })
 .directive('responsivePage', function(){
     return{
         restrict: 'A',
         require: '^aa_aa',
         link: function(scope, element, attrs, $controller) {
             console.log($controller)
         }
     }
  });

jsfiddle

相关文章：