javascript - AngularJS:拆分为新文件时未调用工作指令

问题：将模块拆分为单独的文件后，为什么不调用我的（以前有效的）AngularJS指令？

背景：我的postcards模块包含在一个文件中。我正在尝试将其拆分，但未成功。 postcards.factories和postcards.controllers文件工作正常。我无法使postcards.directives中的单个指令起作用。我已经成功完成了另一个不同的，更复杂的模块的操作。

研究：我读了一些SO帖子，例如this one和this one，但运气不佳。这些帖子似乎专注于module的初始声明，而没有必需的[]。

主模块-明信片

var postcardsApp = angular.module('postcards', ['postcards.directives', 'postcards.factories', 'postcards.controllers']);

明信片指令

var postcardAppDirectives = angular.module('postcards.directives', ['postcards.controllers']);

postcardAppDirectives.directive('numPostcards', function () {
    return {
        restrict: "AE",
        template: '{{ ctrl.numPostcards }}',
        controller: 'postcardDirectiveController as ctrl'
    }
});

明信片控制器

var PostcardsControllers = angular.module('postcards.controllers', ['postcards.factories']);

PostcardsControllers.controller("postcardDirectiveController", ['PostcardFactory',
    function (PostcardFactory) {
        var _this = this;
        PostcardFactory.getNumPostcards().$promise.then(function (data) {
            console.log(data);
            _this.numPostcards = data['numPostcards'];
        });
    }]);

// This controller works fine.
PostcardsControllers.controller('PostcardMainController', ['PostcardFactory', function (PostcardFactory) {...}

明信片工厂

// These are retrieving data fine.
var POSTCARD_URL = 'http://' + BASEURL + '/api/v1/postcards/';

var PostcardsFactories = angular.module('postcards.factories', []);

PostcardsFactories.factory('Inbox', ['$resource', function ($resource) {
    return $resource(POSTCARD_URL);
}
]);

// More factories pulling data from my API here...

PostcardsFactories.factory('PostcardFactory', ['$http', 'Inbox', 'Sent', 'PostcardDetail', 'NewPostcard', 'UnreadCount', '$q',
    function ($http, Inbox, Sent, PostcardDetail, NewPostcard, UnreadCount, $q) {

        var PostcardFactory = {}

        // Get count of all unread messages sent TO a member
        PostcardFactory.getNumPostcards = function () {
            return UnreadCount.query()
        };

        ...  // Tons of stuff in here

        return PostcardFactory
    }

主应用程序变量-显示包含postcards作为依赖项

var app = angular.module('mainApp', ['ngResource', 'boat', 'members', 'location', 'trips',
    'angular-jwt', 'tools', 'carousel', 'navbar', 'dashboard', 'postcards', 'widgets', 'ui.bootstrap', 'ui.router']);

HTML调用指令

<li ng-if="navCtrl.isLoggedIn()">
    <a ui-sref="dashboard.postcards">
    <span class="glyphicon glyphicon-envelope" style="color: dodgerblue"></span>
    <span style="margin-left: -3px; margin-top: -15px; background-color: red; opacity: .75;" class="badge">
    <num-messages></num-messages>
    </span>
    </a>
</li>

包含在HTML文件中

<script src="./static/app/postcards/postcards.js"></script>
<script src="./static/app/postcards/postcards_factories.js"></script>
<script src="./static/app/postcards/postcards_controllers.js"></script>
<script src="./static/app/postcards/postcards_directives.js"></script>

问题重述：为什么不调用我的指令？

附加问题：当我需要将其他模块作为.module('myModule', [...])声明的一部分时，我并不讨厌。

最佳答案

已回答问题-以最愚蠢的方式。

同事未重构<num-messages></num-messages>以将指令的名称更改为numPostcards。我没有检查。

现在已成功通过<num-postcards></num-postcards>调用。

抱歉，@ Phil。

关于javascript - AngularJS:拆分为新文件时未调用工作指令，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32556196/