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

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

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

Answer 2

这还不是完整的答案，如果提供更多信息，我们将进行更新。但是，在这种情况下，有一些事情对我有帮助：

\n\n

\n
• 根据您的包含列表，您还没有包含角度。如果缺少角度，请将其添加为包含。
\n
• 没有代码可以将监视的show​​变量更改为任何计算结果为 true 的变量。让您的代码更改show要if(newValue)执行的变量。
\n

\n\n

如果前面的几点确实解决了问题，这里有一些关于如何缩小问题范围的建议：

\n\n

\n
• 工作指令包含在同一个模块中editEditorApp，而非工作指令包含在另一个模块中，即依赖注入。尝试在 上声明该指令editEditorApp。
\n
• 该指令的调用方式与模块类似，据我所知，这应该没有问题，但尝试重命名它也没有什么坏处。
\n

\n\n

这个答案是一个正在进行的工作，为了获得更好的答案，您需要将问题缩小到可重现的示例，即所有代码都可用。否则一切都只是猜测！到目前为止，这个答案的意思是：

\n\n

\n

通过研究问题来帮助我们找到解决方案，然后贡献您的研究结果以及您\xe2\x80\x99尝试过的任何其他内容作为部分答案。

\n

\n\n

正如指南所建议的那样。

\n