javascript – AngularJs:指令永远不会调用

前端之家收集整理的这篇文章主要介绍了javascript – AngularJs:指令永远不会调用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个自发停止工作的指令.出于某种原因,它永远不会在控制台中打印出错误.这很奇怪,因为其他指令(看起来几乎相同)正在发挥作用(参见工作指令的最后一篇).

这是指令:

  1. angular.module('popup').directive('popup',['Locator','PopupService',// This line of code is reached
  2. function(Locator,PopupService) {
  3. return {
  4. restrict: 'A',scope: {
  5. "show": '=',"anchor": '=','direction': '='
  6. },link: function($scope,element,attr) { // This never called
  7. $scope.$watch('show',function(newValue,oldValue) {
  8. if (newValue) { // This is never called
  9. var pos = Locator.getCenterPosition($($scope.anchor));
  10. PopupService.togglePopup($(element),{
  11. x: pos.x,y: pos.y,origin: $scope.direction,remove_callback: function() {
  12. $scope.show = false;
  13. console.log("SHOW: " + $scope.show);
  14. }
  15. });
  16. } else {
  17. autoHide();
  18. }
  19. },true);
  20. }
  21. };
  22. }
  23. ]);

这是包含指令的Jade代码(Jade是一种html模板语言.):

  1. block total-content
  2. .div {{ edit }}
  3. .main-body(ng-controller="editEditorController" ng-init="popups = {};format.colorMode='W'; draftID='#{draftID}'; draftEditorID='#{draftEditorID}'; draftOwnerID='#{draftOwnerID}' ")
  4. div {{ commentEditor }}
  5. ul#left-tool-list.side-tool-list.tool-list()
  6. li#comments-tool-Box
  7. span.tool-Box-title Comments
  8. span.tool-Box-control-area
  9. #tool-Box-controls
  10. span#comment-button.tool-Box-button(ng-click="newComment()") Add Comment
  11. span#view-comments-button.tool-Box-button(ng-init="popups.showCommentPopup = false" ng-click="popups.showCommentPopup = true; $event.stopPropogation();" stop-event='click') View Comments
  12. div#comment-list-container(popup show="popups.showCommentPopup" anchor="'#view-comments-button'" direction="'top'") // The directive in question
  13. comment-displayer#comment-list(edit="edit")

这是应用程序的声明:

  1. var editEditorApp = angular.module('editEditorApp',['general','API','popup']);

这是包含的顺序:

  1. /* App */ script(src='/js/angular/editEditor/editEditorApp.js')
  2. /* JQuery */ script(src='/js/pxem.JQuery.js')
  3. /* Plain JS */ script(src='/styles/js/window-height.js')
  4. /* Tinymce */ script(src='/js/ice_tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js')
  5. /* JQuery dep. */ script(src='/js/jquery.browser.min.js')
  6. /* Angular Module - factory */ script(src='/js/angular/api/api.js')
  7. /* Angular Module - directives */ script(src='/js/angular/directives/general.js')
  8. /* Angular Module - popup (services) */ script(src='/js/angular/general/popupService.js')
  9. /* Angular Module - popup (directive) */ script(src='/js/angular/directives/popup.js')
  10. /* Angular Module */ script(src='/js/angular/filter/cut.js')
  11. /* Angular Module - factory */ script(src='/js/angular/editEditor/commentLikeCreator.js')
  12. /* Angular Module - factory */ script(src='/js/angular/editEditor/autoSave.js')
  13. /* Angular Module - directives */ script(src='/js/angular/editEditor/commentBox.js')
  14. /* Angular Module - directives */ script(src='/js/angular/editEditor/editor.js')

该指令正在运行,但我不知道为什么:

  1. editEditorApp.directive('commentBox',function(PopupService) {
  2. return {
  3. restrict: 'E',templateUrl: "/partials/edit-comment-Box",replace: true,scope: {
  4. "comment": '=',"onDelete": '=',"onHide": '=',"location": '=',"show": '='
  5. },attr) {
  6. console.log("LINK POPUP");
  7. $scope.$watch('show',oldValue) {
  8. console.log("NEW VALUE: " + newValue);
  9. if (newValue) {
  10. console.log("SHOW!");
  11. $scope.popup = PopupService.popPopup($(element),{
  12. x: location.x,y: location.y,origin: 'bottom',hideOthers: true,remove_callback: function() {
  13. $scope.show = false;
  14. console.log("SHOW: " + $scope.show);
  15. }
  16. });
  17. } else {
  18. if ($scope.popup) {
  19. $scope.popup.removePopup();
  20. }
  21. }
  22. });
  23. },controller: function($scope) {
  24. console.log("CONTROLLER");
  25. $scope.delete = function() {
  26. $scope.popup.removePopup();
  27. if ($scope.onDelete) {
  28. $scope.onDelete();
  29. }
  30. };
  31. $scope.hide = function() {
  32. $scope.popup.removePopup();
  33. if ($scope.onHide) {
  34. $scope.onHide();
  35. }
  36. };
  37. }
  38. };
  39. }
  40. );

注意:此问题以前是在一个不同的问题下发布的,但我现在意识到它不是指令的“监视”部分被破坏,但该指令从未被调用过.我删除了上述问题并发布了这个问题.

解决方法

请注意您在第一个模块中使用模块的区别以及第二个模块中模块的声明和用法.

在第一个不工作的地方,你没有任何依赖.即使你没有,只需放一个空数组.

  1. angular.module('popup',[]).directive('popup',true);
  2. }
  3. };
  4. }
  5. ]);

猜你在找的JavaScript相关文章