AngularJS : 未调用指令函数

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 未编译或未注册指令。

"not compiled" 案例 可能是因为该指令在 Angular 应用程序之外使用，例如：

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

或者，如果您动态添加了 HTML，但没有添加 $compile 和 link。

"not registered" 案例 可能是由于重新注册了应用的模块。换句话说，您可能遇到以下情况：

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", ...。

Answer 2

我找出了这个问题的原因。在某些时候，我一定是不小心将指令移到了这样的配置块中：

portalApp.config(function ($stateProvider, $urlRouterProvider) {
    portalApp.directive('contactPanel', function () {
        console.log("NEVER SHOWN!");
        return {
            ...snip...
        };
    });
});

一旦我将其移出配置块并移入全局范围，指令立即按应有的方式呈现。

这不起作用的原因是 angular 运行是运行指令之后的配置代码，如下所示：

runInvokeQueue(moduleFn._invokeQueue);    // runs directives
runInvokeQueue(moduleFn._configBlocks);   // runs config blocks

所以从配置块中添加到 _invokeQueue（directive() 函数所做的）的东西将永远不会被执行。

感谢所有试图提供帮助的人。

AngularJS : 未调用指令函数

AngularJS : directive function not called

javascript

directive

angularjs

angularjs-directive