Javascript AngularJs:从未调用指令

我有一个指令，自动停止工作。由于某些原因，它从未被调用，控制台中不会打印错误。这很奇怪，因为其他指令（看起来几乎完全相同）正在运行（请参阅本文末尾的有效指令）

这是指令：

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

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')

这是包含指令的Jade代码（Jade是一种html模板语言）：

这是应用程序的声明：

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

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')

这是包含项的顺序：

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

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

---

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

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

• 根据你的列表，你还没有包括angular。如果缺少，则添加角度作为包含
• 没有任何代码会将监视的

  show

  变量更改为任何计算结果为true的变量。使您的代码更改

  show

  变量以获得

  if（newValue）

  执行

如果前面的几点确实解决了问题，下面是一些缩小问题范围的建议：

• 工作指令包含在同一个模块

  editorapp

  中，而非工作指令包含在另一个模块中，即依赖注入。尝试在

  editorapp

  上声明指令
• 该指令的调用与模块类似，AFAIK这应该没有问题，但尝试重命名它不会有什么坏处

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

通过研究问题来帮助我们找到解决方案，然后将您的研究结果和您尝试的任何其他内容作为部分答案提供给我们

---

正如建议的那样。

注意第一个模块中使用的模块与第二个模块中声明和使用的模块之间的差异

在第一个不起作用的例子中，您没有放置任何依赖项。即使没有，也只需放置一个空数组

angular.module（'popup'，[]）.directive（'popup'，['Locator'，'PopupService'，//到达这行代码
功能（定位器、PopupService）{
返回{
限制：“A”，
范围：{
“显示”：“=”，
“锚定”：“=”，
“方向”：“=”
},
link:function（$scope，element，attr）{//This从未调用过
$scope.$watch（'show'，函数（newValue，oldValue）{
如果（newValue）{//则永远不会调用它
var pos=Locator.getCenterPosition（$（$scope.anchor））；
togglePopup（$（元素）{
x:pos.x，
y:位置y，
来源：$scope.direction，
remove_回调：函数（）{
$scope.show=false；
log（“SHOW:+$scope.SHOW”）；
}
});
}否则{
自动隐藏（）；
}
}，对）；
}
};
}
]);1）将jQuery置于AngularJS之上

因此，顺序如下所示

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

到

控制台是否报告任何内容，例如Google Chrome的开发工具（F12）？@stevuu抱歉，我不清楚。当我说“无错误”时，我的意思是控制台中没有报告错误。最好的做法是先查看jade创建的已编译html，然后再查看是否有任何差异。你在这里展示的东西不够清楚。特别是如果你确信它以前起过作用，那么一定是其他原因改变了它。我想你正在使用版本控制？如果是这样，只需返回到工作的版本并从那里获取它。您是否尝试更改名称ie module（'popup'）。指令（'mypopup'）哪个文件声明由指令和服务共享的弹出模块？
angular.module（'popup'）
将找到现有模块，但
angular.module（'popup'），[]）
首先需要声明它。如果以后使用该表单，它将在没有警告的情况下覆盖原始模块。是的。实际上，我对Jade输出非常感兴趣。我不认为实际指令有任何严重错误。（另外，我是唯一一个真正发现Jade代码比实际HTML更混乱的人吗？）虽然其中许多都是好的建议，但没有一个符合答案的条件。我知道你在试图赚取奖金，购买答案部分是为了获得答案，而不是问题或好的建议。这些进入评论部分。这并不能提供问题的答案。若要评论或要求作者澄清，请留下评论降低他们的帖子。@DaveA根据提供的信息，这是我能给出的最好答案。正如你所看到的，我正在等待作者澄清问题，并肯定会改进我的答案。但我认为它已经提供了信息。我更改措辞以使其更清楚…@eitanfar这不是批评，只是部分要求澄清一下。这是我现在能给出的最好的答案——另请看我对dave的回复。