指令/工厂不在生产中工作答案

【问题标题】：Directive/Factory Not Working in Production指令/工厂不在生产中工作
【发布时间】：2015-08-11 09:53:48
【问题描述】：

我有一个指令可以为用户打印出 Flash 消息。在我的本地主机上一切正常，但只要我在 Heroku 上测试它，就不会出现 Flash 消息。这是控制器。

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>

控制台上没有出现错误。有趣的是，在 html 中显示的 flash 消息没有加载。

这是 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>

但是关于heroku的生产

<div ng-repeat="message in alerts.flash.messages" class="ng-scope"></div>

我正在通过..在我的代码中创建闪存。

Flash.addMessage({type: "success", text: "Your link has been copied!"});

我的问题是，为什么这没有出现在我的生产代码中，但它出现在我的本地主机上，我该如何解决？

【问题讨论】：

你在缩小你的 JavaScript 吗？
您检查控制台的错误是什么浏览器？一些浏览器显示一些错误，而其他浏览器只是警告或没有。试试火狐、Chrome、IE、Opera。此外，您知道您的服务器是否正在缓存输出吗？由于这些是静态文件，因此很可能会发生缓存。确保您正在下载的是最新的或缓存的文件。
有人能解释一下他们为什么投反对票吗？我觉得这是一个包含足够适当信息的有效问题。
我不知道如何进一步澄清这个问题。它可以在本地主机上运行，但在 heroku 上没有出现闪烁消息。我已经记录了出现在本地和生产之间的 html 代码。我还需要显示哪些其他调试？除了代码被执行的事实之外，控制台没有告诉我任何信息。
上面的每段代码是否都包装在一个单独的 IIFE 中？如果没有，您有两个function flash() 对象，一个用于指令，一个用于工厂。如果它们只是在单独的文件中但没有包装 (function() { [...] })()，它们都将在全局范围内并可能导致问题。

标签： javascript angularjs flash heroku

【解决方案1】：

当然，重命名文件名肯定解决了你的问题。但问题是，为什么它更早在 localhost 上工作？我认为在 localhost 上您的所有 javascript 文件都会立即加载，并且相应工厂和指令的“flash”功能已正确注册。

但是在 heroku 或任何其他远程服务器上运行时，您会遇到问题，因为控制器或指令可能注册的“flash”功能可能与它们必须注册的功能不同。

一个合理的原因可能是 angularjs 的库文件（来自您的服务器或 cdn）比您的文件（如 controller.js、service.js 或directive.js）加载到 DOM 稍晚。这就是为什么 DOM 在开始时无法识别 .controller() 或 .service() 等的角度语法。因此，您的全局“闪存”功能之一（指令或工厂）被覆盖。

首先我建议你重命名，你已经这样做了，其次，不要在指令或工厂中使用全局函数。

我希望这可以解释。

【讨论】：

【解决方案2】：

重命名我的文件名和指令中的内部函数解决了这个问题。

【讨论】：