AngularJS:拆分到新文件时不调用工作指令
AngularJS: Working directive not called when split to new file
问题:为什么我的(以前工作的)AngularJS指令在将模块分成单独的文件后被调用?
Background:我有我的postcards
模块包含在一个文件中。我正在尝试,但没有成功。postcards.factories
和postcards.controllers
文件工作正常。我不能让postcards.directives
中的单个指令起作用。我曾经用一个不同的、复杂得多的模块成功地做到了这一点。
Research:我已经阅读了几个SO帖子,就像这一个和这一个没有太多的运气。这些帖子似乎集中在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
}
主应用程序var -显示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。
相关文章:
- 显示指令时调用指令方法
- AngularJS:如何调用指令中定义的函数'控制器的作用域
- 如何在ngRepeat中调用指令
- 未对输入更改调用指令
- 从子指令调用指令函数不起作用
- 从 AngularJS 中的父控制器调用指令的方法
- 从服务 AngularJS + TypeScript 调用指令
- 如何从 Angular 上的控制器调用指令的函数
- 如何从 JavaScript 调用指令函数
- Angular JS 如何从指令模板内容事件调用指令范围函数
- 从控制器调用指令中函数的最佳方法是什么
- 从传入的内容调用指令方法
- Angularjs-在ng-init函数完成后调用指令
- 从另一个指令调用指令
- 从父指令角度调用指令函数
- 如何从控制器调用指令作用域上的函数
- 有棱角的从html调用指令中的函数
- 动态元素未在AngularJS上调用指令方法
- 是'不良做法'用于Angular控制器调用指令上的函数
- AngularJS:从具有隔离作用域的控制器中调用指令中的函数