AngularJS：分割到新文件時未調用工作指令

問題：爲什麼我的（以前的工作）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']);

postcards.directives

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

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

postcards.controllers

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) {...}

postcards.factories

// 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', [...])聲明的一部分真的不神交。

來源

2015-09-14 PANDA Stack

在這裏沒有看到任何HTML，所以我不確定你爲什麼認爲你的指令會被*稱爲*。假設實際上有一些含有''或類似的HTML，你是否已將所有上述文件包含在'

相關問題