javascript – 指令/工厂不工作在生产

我有一个指令,为用户打印出快速消息.一切都在我的本地主机上正常工作,但一旦我测试了在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()等的角语法.因此,您的全局“闪存”功能(指令或工厂)中的一个被覆盖.

首先我建议你重命名,你已经做了,其次,不要在指令或工厂内使用全局函数.

我希望这样解释.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...