Question

如何将控制器暴露给另一个指令。最后，我想在指令之间进行通信。拥有幻灯片指令$编译对象。有响应页面指令更新幻灯片指令。首先，我需要他们之间的沟通。

继承错误：

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

Check out the live code on JsFiddle

HTML

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

Answer 1

尝试require: '^slideshow'（注意^）在其祖先上寻找slideshow控制器。

来自docs

^前缀表示此指令在其上搜索控制器它的父母（没有^前缀，指令会寻找控制器就在它自己的元素上。）

Answer 2

我希望我能帮助你。

可以直接使用。

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

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

Check out the live code on JsFiddle

2 个答案: