Question

我有一个自发停止工作的指令。出于某种原因，永远不会被称为，并且在控制台中没有打印出错误。这很奇怪，因为其他指令（其中似乎几乎完全相同）正在运作（请参阅帖子最后的工作指令）。 / p>

这是指令：

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

请注意您在第一个模块中使用模块的差异以及第二个模块中模块的声明和用法。

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

＆＃13;

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

＆＃13;

Answer 2

这还不是一个完整的答案，如果给出更多信息，将会更新。但是，在这种情况下，有一些事情可以帮助我：

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

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

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

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

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

正如guidelines所示。

Answer 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',[])

AngularJs：指令从不打电话

3 个答案: