AngularJs：从不调用指令答案

【问题标题】：AngularJs: Directive NEVER calledAngularJs：从不调用指令
【发布时间】：2014-07-28 19:21:10
【问题描述】：

我有一个自发停止工作的指令。出于某种原因，它永远不会被调用，并且控制台中不会打印出任何错误。这很奇怪，因为其他指令（似乎几乎相同）正在工作（请参阅帖子末尾的工作指令）。

这是指令：

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

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

【问题讨论】：

控制台是否报告任何内容，例如 Google Chrome 的开发工具 (F12)？
@stevuu 抱歉，我不清楚。当我说“没有错误”时，我的意思是控制台中没有报告错误。
最好看一下jade先编译好的html，看看有没有什么不同。您在此处显示的内容还不够清楚。特别是如果您确定它以前有效，那么一定是其他东西改变了它。我想你正在使用版本控制？如果是这样，只需恢复到有效的版本并从那里获取它。
你有没有试过改名字ie module('popup').directive('mypopup'
哪个文件声明了指令和服务共享的弹出模块？ angular.module('popup') 将找到现有模块，但首先需要 angular.module('popup', []) 来声明它。如果以后使用该表单，它将覆盖原始模块而不会发出警告。

标签： javascript angularjs pug

【解决方案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);
            }
        };
    }
]);

【讨论】：

【解决方案2】：

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

根据您的包含列表，您还没有包含 angular。如果缺少 angular，请将其添加为包含。
没有代码可以将观察到的show 变量更改为任何计算结果为真的值。让您的代码更改show 变量以执行if(newValue)。

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

工作指令包含在同一模块editEditorApp 中，而非工作指令包含在另一个模块中，即依赖注入。尝试在 editEditorApp 上声明指令。
该指令被称为模块，AFAIK 这应该没问题，但尝试重命名它不会有什么坏处。

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

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

正如guidelines 建议的那样。

【讨论】：

是的。实际上，我对 Jade 输出非常感兴趣。我认为实际指令没有任何严重错误。（另外，我是唯一一个发现 Jade 代码比实际 HTML 更令人困惑的人吗？）
虽然其中许多都是很好的建议，但没有一个可以作为答案。我了解您正在努力赚取赏金，购买答案部分是为了 ANSWERS 而不是问题或好的建议。这些进入评论部分。
这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
@DaveA 根据所提供的信息，这是我能给出的最佳答案。如您所见，我正在等待作者澄清问题，并且肯定会改善我的答案。我仍然认为它已经在提供信息。我更改了措辞以使其更清楚...
@eitanfar 这不是批评，只是部分要求澄清。这主要是我现在能给出的最佳答案 - 另请参阅我对 dave 的回复。

【解决方案3】：

1) 将 jQuery 置于 AngularJS 之上

所以顺序如下

/* JQuery */     script(src='/js/pxem.JQuery.js')   
/* AngularJS *   script(src='<angularjs cdn>')   
/* App */        script(src='/js/angular/editEditor/editEditorApp.js')

AngularJS 将 jQlite 与它捆绑在一起，但如果你放 jQuery，它将使用你的 jQuery。

2）正如其他人指出的那样，我在自己面前被这个烧毁了：- 改变

angular.module('popup')

到

angular.module('popup',[])

【讨论】：