我有一个指令,为用户打印出快速消息.一切都在我的本地主机上正常工作,但一旦我测试了在Heroku,闪存消息不会出现.这是控制器.
angular.module("alerts")
.controller("AlertsController",alertController)
alertController.$inject = ['Flash']
function alertController(Flash) {
var vm = this;
vm.flash = Flash;
}
指令…
angular.module("alerts")
.directive('flash',flash);
flash.$inject = ['$timeout'];
function flash ($timeout){
return {
restrict: 'E',replace: true,scope: {
text: '=',type: '='
},template: '<div id="flash_message" class="notification" ng-class="type"> {{text}} hello </div>',link: function(scope,element,attrs){
$timeout(function(){
element.remove();
},5000);
}
}
}
以及处理存储闪存消息的工厂.
angular.module("alerts")
.factory("Flash",flash)
function flash() {
var messages = [];
var results = {
messages: messages,printMessage: printMessage,addMessage: addMessage
}
return results;
function printMessage() {
return results.messages
}
function addMessage(message) {
results.messages.push(message);
}
}
我的HTML代码…
<div ng-controller="AlertsController as alerts">
<div ng-repeat="message in alerts.flash.messages">
<flash type="message.type" text="message.text"></flash>
</div>
</div>
控制台上没有出现错误.有趣的是Flash消息在html中没有加载.
这是在localhost中显示的.
<div ng-repeat="message in alerts.flash.messages" class="ng-scope"> <div id="flash_message" class="notification ng-binding ng-isolate-scope success" ng-class="type" type="message.type" text="message.text"> Your link has been copied! hello </div> </div>
但是在英雄生产
<div ng-repeat="message in alerts.flash.messages" class="ng-scope"></div>
我正在通过我的代码创建闪存
Flash.addMessage({type: "success",text: "Your link has been copied!"});
解决方法
当然,重命名文件名必须解决你的问题.但问题是,为什么在localhost上工作较早？我想在本地主机上,您的所有javascript文件立即加载,并且相应工厂和指令的功能“flash”已正确注册.
但是运行在heroku或任何其他远程服务器上时,您将遇到问题,因为控制器或指令可能会注册不同于它们必须注册的“flash”功能.
一个合理的原因可能是,将角度的库文件(从您的服务器或cdn)加载到DOM中比您的文件(如controller.js,service.js或directive.js)晚一些.这就是为什么DOM在开始时没有识别到.controller()或.service()等的角语法.因此,您的全局“闪存”功能(指令或工厂)中的一个被覆盖.
首先我建议你重命名,你已经做了,其次,不要在指令或工厂内使用全局函数.
我希望这样解释.
