javascript - AngularJs:从未调用过的指令

Question

我有一个自发停止工作的指令。出于某种原因，它从未被调用并且控制台中没有错误打印出来。这很奇怪，因为其他指令(看起来几乎相同)正在工作(有关工作指令，请参阅帖子的最后)。

这是指令:

angular.module('popup').directive('popup', ['Locator', 'PopupService', // This line of code is reached
    function(Locator, PopupService) {
        return {
            restrict: 'A',
            scope: {
                "show": '=',
                "anchor": '=',
                'direction': '='
            },
            link: function($scope, element, attr) { // This never called
                $scope.$watch('show', function(newValue, oldValue) {
                    if (newValue) { // This is never called
                        var pos = Locator.getCenterPosition($($scope.anchor));
                        PopupService.togglePopup($(element), {
                            x: pos.x,
                            y: pos.y,
                            origin: $scope.direction,
                            remove_callback: function() {
                                $scope.show = false;
                                console.log("SHOW: " + $scope.show);
                            }
                        });
                    } else {
                        autoHide();
                    }
                }, true);
            }
        };
    }
]);

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

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

这是应用的声明:

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

这是包含的顺序:

  /* App */   script(src='/js/angular/editEditor/editEditorApp.js')
  /* JQuery */   script(src='/js/pxem.JQuery.js')
  /* Plain JS */   script(src='/styles/js/window-height.js')
  /* Tinymce */   script(src='/js/ice_tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js')
  /* JQuery dep. */   script(src='/js/jquery.browser.min.js')
  /* Angular Module - factory */   script(src='/js/angular/api/api.js')
  /* Angular Module - directives */   script(src='/js/angular/directives/general.js')
  /* Angular Module - popup (services) */   script(src='/js/angular/general/popupService.js')
  /* Angular Module - popup (directive) */   script(src='/js/angular/directives/popup.js')
  /* Angular Module */   script(src='/js/angular/filter/cut.js')
  /* Angular Module - factory */   script(src='/js/angular/editEditor/commentLikeCreator.js')
  /* Angular Module - factory */   script(src='/js/angular/editEditor/autoSave.js')
  /* Angular Module - directives */   script(src='/js/angular/editEditor/commentBox.js')
  /* Angular Module - directives */   script(src='/js/angular/editEditor/editor.js')

该指令有效，但我不知道为什么会这样:

editEditorApp.directive('commentBox',
    function(PopupService) {
        return {
            restrict: 'E',
            templateUrl: "/partials/edit-comment-box",
            replace: true,
            scope: {
                "comment": '=',
                "onDelete": '=',
                "onHide": '=',
                "location": '=',
                "show": '='
            },
            link: function($scope, element, attr) {
                console.log("LINK POPUP");
                $scope.$watch('show', function(newValue, oldValue) {
                    console.log("NEW VALUE: " + newValue);
                    if (newValue) {
                        console.log("SHOW!");
                        $scope.popup = PopupService.popPopup($(element), {
                            x: location.x,
                            y: location.y,
                            origin: 'bottom',
                            hideOthers: true,
                            remove_callback: function() {
                                $scope.show = false;
                                console.log("SHOW: " + $scope.show);
                            }
                        });
                    } else {
                        if ($scope.popup) {
                            $scope.popup.removePopup();
                        }
                    }
                });
            },
            controller: function($scope) {
                console.log("CONTROLLER");
                $scope.delete = function() {
                    $scope.popup.removePopup();
                    if ($scope.onDelete) {
                        $scope.onDelete();
                    }
                };
                $scope.hide = function() {
                    $scope.popup.removePopup();
                    if ($scope.onHide) {
                        $scope.onHide();
                    }
                };
            }
        };
    }
);

注意:这个问题之前是在另一个问题下发布的，但我现在意识到它不是指令的“watch”部分被破坏了，而是指令从未被调用过.我删除了上述问题并发布了这个问题。

Answer 1

请注意您在第一个中使用模块与在第二个中声明和使用模块的区别。

在第一个不起作用的地方，您没有放置任何依赖项。即使你没有，也只是放一个空数组。

angular.module('popup',[]).directive('popup', ['Locator', 'PopupService', // This line of code is reached
    function(Locator, PopupService) {
        return {
            restrict: 'A',
            scope: {
                "show": '=',
                "anchor": '=',
                'direction': '='
            },
            link: function($scope, element, attr) { // This never called
                $scope.$watch('show', function(newValue, oldValue) {
                    if (newValue) { // This is never called
                        var pos = Locator.getCenterPosition($($scope.anchor));
                        PopupService.togglePopup($(element), {
                            x: pos.x,
                            y: pos.y,
                            origin: $scope.direction,
                            remove_callback: function() {
                                $scope.show = false;
                                console.log("SHOW: " + $scope.show);
                            }
                        });
                    } else {
                        autoHide();
                    }
                }, true);
            }
        };
    }
]);