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

這還不是一個完整的答案，如果給出更多信息，將會更新。 但是，在這種情況下，有一些事情可以幫助我：

• 根據您的包含列表，您還不包括角度。 如果缺少角度，則添加角度。
• 沒有代碼可以將監視的show變量更改為任何計算結果為true的變量。 使代碼更改show變量以獲取if(newValue) 。

如果以前的幾點確實解決了問題，這里有一些關於如何縮小問題的建議：

• working指令包含在同一個模塊editEditorApp ，而非工作指令包含在另一個模塊中，即依賴注入。 嘗試在editEditorApp上聲明指令。
• 該指令被稱為模塊，AFAIK這應該沒有問題，但嘗試重命名它不會有害。

這個答案是一項正在進行的工作，可以為您提供更好的答案，將問題范圍縮小到可重現的示例 ，即所有代碼都可用。 否則一切都在猜測！ 到目前為止，這個答案的意思是：

通過研究問題幫助我們找到解決方案，然后貢獻您的研究結果以及您作為部分答案嘗試的任何其他內容。

正如指南所示。

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