как вызвать функцию одной директивы от другого

Question

У меня есть следующая директива abc

module.directive("abc", [ 
    "notifier", "session", function(notifier, session) { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
     buffer: "=" 
     }, 
     template: "<li class=\"file \" ng-class=\"{active: active, dirty: dirty, changed: changed}\">\n " + 
" <ul class=\"participants\">\n " + 
"  <li ng-class=\"participant.style\" ng-repeat=\"(id, participant) in buffer.participants\" title=\"{{participant.handle}}\">\n </li>\n " + 
" </ul>\n " + 
" <a class=\"filename\" ng-click=\"activateBuffer(buffer)\" ng-dblclick=\"promptFileRename(buffer) | trackEvent:'File':'Rename':'Sidebar'\">{{buffer.filename}}</a>\n " + 
" <ul class=\"file-ops\">\n " + 
"  <li class=\"delete\">\n  " + 
"   <button ng-click=\"promptFileDelete(buffer) | trackEvent:'File':'Delete':'Sidebar'\" class=\"btn btn-mini\" tooltip=\"Delete this file\" tooltip-placement=\"right\">\n  " + 
"    <i class=\"icon-remove\"></i>\n  " + 
"   </button>\n " + 
"  </li>\n " + 
" </ul>\n" + 
"</li>", 

controller: function($scope){ 
     var buffer; 
     buffer = $scope.buffer; 

     $scope.$watch((function() { 
      return session.isDirty(["buffers", buffer.id]); 
     }), function(dirty) { 
      $scope.dirty = dirty && Date.now(); 
      return $scope.changed = dirty && !$scope.active; 
     }); 
     $scope.$watch((function() { 
      return session.getActiveBuffer() === buffer; 
     }), function(active) { 
      $scope.active = active && Date.now(); 
      return $scope.changed = false; 
     }); 
     $scope.activateBuffer = function(buffer) { 
      return session.activateBuffer(buffer.filename); 
     }; 
     $scope.promptFileRename = function(buffer) { 
      console.log("rename file function called"); 
     /* return notifier.prompt("Rename file", buffer.filename, {*/ 
     //confirm: function(filename) { 
      //return session.renameBuffer(buffer.filename, filename); 
     //} 
     /*});*/ 
     }; 
     $scope.promptFileDelete = function(buffer) { 
      console.log("delete file function called"); 
     /* return notifier.confirm("Confirm Delete", "Are you sure that you would like to delete " + buffer.filename + "?", {*/ 
     //confirm: function() { 
      //return session.removeBuffer(buffer.filename); 
     //} 
     /*});*/ 
     }; 

     // 
     //link: function($scope, $el, attrs) { 
//} 

} 

    }; 
    } 
]); 

из другой директивы def я пытаюсь вызвать функции в abc Я попытался require в abc директивы в def как упомянуто here

module.directive("def", [ 
    "$timeout", "$q", "session", "notifier", "visitor", "overlay", function($timeout, $q, session, notifier, visitor, overlay) { 
    return { 
     require: 'abc', //<-- requiring the directive 
     restrict: "E", 
     replace: true, 
     template: "<div class=\"plunker-sidebar\">\n " 
+ " <plunker-restorer></plunker-restorer>\n " 
+ " <div class=\"share\" ng-switch=\"session.isSaved()\">\n " 
+ "  <div ng-switch-when=\"true\" addthis-toolbox class=\"addthis_default_style addthis_20x20_style\" addthis-description=\"{{session.description}}\">\n " 
+ "   <a target=\"_self\" class=\"addthis_button_twitter\"></a>\n  " 
+ "   <a target=\"_self\" class=\"addthis_button_facebook\"></a>\n  " 
+ "   <a target=\"_self\" class=\"addthis_button_google_plusone_share\"></a>\n  " 
+ "   <a target=\"_self\" class=\"addthis_button_linkedin\"></a>\n  " 
+ "   <a target=\"_self\" class=\"addthis_button_compact\"></a>\n " 
+ "  </div>\n " 
+ " </div>\n " 
+ " <details open>\n" 
+ "  <summary class=\"header\">Files</summary>\n " 
+ "  <ul class=\"plunker-filelist nav nav-list context-menu-one\">\n  " 
+ "   <abc buffer=\"buffer\" ng-repeat=\"buffer in session.getBufferArray() | orderBy:'filename'\">\n  " 
+ "      </plunker-sidebar-file>\n  " 
+ "   <li class=\"newfile\">\n  " 
+ "    <a ng-click=\"promptFileAdd() | trackEvent:'File':'Add':'Sidebar'\">\n   " 
+ "     <i class=\"icon-file\"></i> New file\n  " 
+ "    </a>\n  " 
+ "   </li>\n " 
+ "  </ul>\n " 
+ " </details>\n " 
+ " <details ng-show=\"session.isSaved()\">\n " 
+ "  <summary class=\"header\">Versions " 
+ "   <span class=\"label\" ng-bind=\"session.plunk.history.length | number\"></span>" 
+ "  </summary>\n " 
+ "  <ul class=\"plunker-filelist nav nav-list\">\n  " 
+ "   <li ng-class=\"{active: $index==session.currentRevisionIndex, frozen: $index==session.plunk.frozen_version}\" ng-repeat=\"event in session.plunk.history | orderBy:'-created_at'\">\n  " 
+ "    <a ng-click=\"revertTo($index) | trackEvent:'Plunk':'Revert':'Sidebar'\">\n   " 
+ "     <i ng-class=\"event.event | eventIcon\"></i>\n   " 
+ "     <span ng-bind=\"event.event | eventName\"></span>\n   " 
+ "     <abbr timeago=\"{{event.created_at}}\"></abbr>\n   " 
+ "     <i class=\"icon-lock\" ng-show=\"session.plunk.frozen_at && $index==session.plunk.history.length - 1 - session.plunk.frozen_version\" tooltip=\"The plunk is currently frozen at this version\" tooltip-placement=\"right\"></i>\n  " 
+ "    </a>\n  " 
+ "   </li>\n " 
+ "  </ul>\n " 
+ " </details>\n " 
+ " <details open>\n " 
+ "  <summary class=\"header\">Plunk</summary>\n " 
+ "  <form>\n  " 
+ "   <div>\n  " 
+ "    <label for=\"plunk-description\">\n   " 
+ "     <div>Description:</div>\n   " 
+ "     <textarea id=\"plunk-description\" rows=\"2\" ng-model=\"session.description\"></textarea>\n  " 
+ "    </label>\n  " 
+ "    <label for=\"plunk-tags\">\n   " 
+ "     <div>Tags:</div>\n   " 
+ "     <plunker-tagger id=\"plunker-tags\" ng-model=\"session.tags\" />\n  " 
+ "    </label>\n  " 
+ "    <div ng-show=\"session.isSaved()\">\n   " 
+ "     <div>User:</div>\n   " 
+ "     <plunker-inline-user user=\"session.plunk.user\"></plunker-inline-user>\n  " 
+ "    </div>\n  " 
+ "    <div ng-hide=\"session.isSaved() || !visitor.isMember()\">\n   " 
+ "     <div>Privacy:</div>\n   " 
+ "     <label>\n   " 
+ "      <span tooltip=\"Only users who know the url of the plunk will be able to view it\" tooltip-placement=\"right\">\n " 
+ "       <input type=\"checkbox\" ng-model=\"session.private\" />\n    private plunk\n   " 
+ "      </span>\n   " 
+ "     </label>\n  " 
+ "    </div>\n  " 
+ "    <div ng-show=\"session.isSaved()\">\n   " 
+ "     <div>Privacy:</div>\n   " 
+ "     <abbr ng-show=\"session.plunk.private\" tooltip-placement=\"right\" tooltip=\"Only users who know the url of the plunk will be able to view it\">" 
+ "      <i class=\"icon-lock\"></i> private plunk" 
+ "     </abbr>\n   " 
+ "     <abbr ng-hide=\"session.plunk.private\" tooltip-placement=\"right\" tooltip=\"Everyone can see this plunk\">" 
+ "      <i class=\"icon-unlock\"></i> public plunk" 
+ "     </abbr>\n  " 
+ "    </div>\n  " 
+ "   </div>\n " 
+ "  </form>\n " 
+ " </details>\n" 
+ "</div>", 
     link: function($scope, $el, attrs) { 
     var $desc; 
     $scope.session = session; 
     $scope.visitor = visitor; 

    jQuery.contextMenu({ 
     selector: '.context-menu-one', 
     callback: function (key, options) { 
      switch(key) { 
      case "Rename": 
       plunkerSidebarFile.promptFileRename(); // <- call to func 
       break; 
      case "Delete": 
       plunkerSidebarFile.promptFileDelete(); // <-- call to func 
       break; 
      } 
     }, 
     items: { 
      "Rename": {name: "Edit", icon: "edit"}, 
      "Delete": {name: "Delete", icon: "delete"} 
     } 
    }); 

     $scope.promptFileAdd = function() { 
      return notifier.prompt("New filename", "", { 
      confirm: function(filename) { 
       return session.addBuffer(filename, "", { 
       activate: true 
       }); 
      } 
      }); 
     }; 
     $scope.revertTo = function(rel) { 
      var revert; 
      if (!session.isSaved()) { 
      return; 
      } 
      revert = function() { 
      return overlay.show("Reverting plunk", session.revertTo(rel)); 
      }; 
      if (session.isDirty()) { 
      return notifier.confirm("You have unsaved changes that will be lost if you revert. Are you sure you would like to revert?", { 
       confirm: revert 
      }); 
      } else { 
      return revert(); 
      } 
     };   
     $desc = $el.find("#plunk-description"); 
     $desc.autosize({ 
      append: "\n" 
     }); 
     $scope.$watch("session.description", function(description) { 
      return $desc.trigger("autosize"); 
     }); 
     $scope.$on("resize", function() { 
      return $desc.trigger("autosize"); 
     }); 
     return $(".share").on("click", function(e) { 
      e.stopPropagation(); 
      return e.preventDefault(); 
     }); 
     } 
    }; 
    } 
]); 

, но я получаю ошибку editor-0.11.9.js:5931 Error: No controller: abc

Answer 1

Вы не можете произвольно использовать «требовать», чтобы получить экземпляр контроллера.

Требуется работа, если контроллер/директива находится на указанном уровне.

Так, например, если ваши директивы и живут в одном из родителей (например, они определены в шаблоне того же контроллер), то вы можете использовать требуете с ^ или ^^ префиксом, чтобы указать, где угловую можно найти требуемый контроллер относительного к местоположению текущей директивы.

Из документации:

^^ префикс означает, что эта директива ищет контроллер на своих родителей. (A^Приставка бы директиву искать контроллер на свой собственный элементе или его родитель, без какого-либо префикса, директива будет смотреть только на своем собственном элементе.)

Поэтому, например, если ваши директивы будут в контроллере с шаблоном, как:

<div> 
    <abc></abc> 
    <def></def> 
</div> 

Тогда вы могли бы использовать, чтобы получить require: '^abc' контроллер в вашем «» четкости директивы. Обратите внимание, что это будет дано в функции связи в качестве последнего параметра, так что вы сможете получить доступ его следующим образом:

link: function($scope, $el, attrs, abcController) { ... 

Answer 2

Скажем, у вас есть директива

 angular.module('app', []) 
     .directive("Directve1", function() { 
      return { 
      restrict: "E", 
      controller: function($scope) { 

       this.sayHello = function() { 
       //some logic... 
       }; 
       .... 
     }); 

другой директива, которая требует метод Directve1

  .directive("Directve2", function() { 
       return { 
       require: "Directve1", //include require 
       link: function (scope, element, attrs, directive1Ctrl) { 
        directive1Ctrl.sayHello(); 
       } 
       }; 
      }) 

Примечание: директива1Ctrl является директором директивы, упомянутой в требовании (требуется: «Directve1»)