javascript - Angular : directive function not called

Question

我提供的用于定义我的指令的函数从未被调用。它以前工作正常，但突然停止工作，我不知道为什么。

这是我的指令:

portalApp.directive('contactPanel', function () {
    console.log("NEVER SHOWN!");
    return {
        restrict: 'AE',
        replace: 'true',
        templateUrl: 'partials/account/contactPanel.html',
        scope: {
            contact: '=contact',
            primaryRoleName: '@',
            roleName: '@',
            primary: '=primary',
            locations: '=locations'
        },
        controller: function (userService, $rootScope, $scope) {
            ...snip...
        }
    };
});

这是一个使用示例:

<contact-panel contact="user.account.contacts.billing" role-name="billing"
               locations="locations"></contact-panel>

请注意，我使用了正确的大小写，即 JS 中的驼峰式大小写和 HTML 中的连字符。

关键线索是第二行中记录的消息(即“NEVER SHOWN!”)从未显示在控制台中。如果我在指令声明之前立即记录一条消息，那么它就会显示出来，所以解释器正在执行这段代码，但框架从未使用我的声明。

显然我很想得到答案，但我也很想听听一些调试此类问题的方法。

Answer 1

我只能看到 2 种可能会表现出您所描述的行为。带有指令的 HTML 未编译或指令未注册。

“未编译”情况可能是因为该指令在 Angular 应用程序之外使用，例如:

<div ng-app="portalApp">
 ...
</div>
...
<contact-panel></contact-panel>

或者，如果您动态添加了 HTML，但没有$compile 并链接它。

“未注册”情况可能是由于重新注册了应用的模块。换句话说，您可能遇到以下情况:

var portalApp = angular.module("portalApp", []);
portalApp.directive("contactPanel", function(){...});

// then elsewhere you use a setter:

angular.module("portalApp", []).controller("FooCtrl", function(){});    
// instead of the getter:
// var app = angular.module("portalApp");

对 angular.module("portalApp", []) 的第二次调用删除了之前注册的 .directive("contactPanel", ...。