指令/工厂在生产环境中无法工作

Question

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

angular.module("alerts")

.controller("AlertsController", alertController)

alertController.$inject = ['Flash']

function alertController(Flash) {
  var vm = this;

  vm.flash = Flash;
}

该指令定义了一个 AngularJS 应用程序的根元素。

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中呈现的闪存信息未加载。

这是在本地主机上显示的内容。

<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。

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

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

- thank_you

---

我正在使用 ngannotate-rails 来帮助我进行代码压缩。至于浏览器方面，我会检查所有的浏览器。 - thank_you

看起来对我来说是链条上游的问题。Flash.addMessage没有发生，或者它所做的不会添加到alerts.flash.messages中。需要进行更多的调试。 - Kevin B

有人可以解释一下为什么他们给我点了踩吗？我觉得这是一个合理的问题，提供了足够的适当信息。 - thank_you

我不知道如何进一步澄清问题。它在本地主机上运行，但在Heroku上没有出现任何闪存消息。我已记录了出现在本地和生产环境之间的HTML代码。我需要展示哪些其他调试信息？控制台除了执行代码外没有告诉我任何东西。 - thank_you

以上的每段代码都被包含在单独的IIFE中了吗？如果没有，你会有两个function flash()对象，一个用于指令，另一个用于工厂。如果它们只是在不同的文件中但没有被包裹在(function() { [...] })()中，它们都将在全局范围内，并可能导致问题。 - Tom

Answer 1

当然，重命名文件名可能已经解决了问题。但问题是，为什么在本地主机上可以工作呢？我认为在本地主机上，所有的 javascript 文件都会立即加载，而各自工厂和指示符的 'flash' 函数正确注册了。

但是在 heroku 或其他远程服务器上运行时，您会遇到问题，因为控制器或指示符可能会注册不同于它们必须注册的 'flash' 函数。

一个合理的原因可能是 angularjs 的库文件（来自您的服务器或 cdn）比 controller.js、service.js 或 directive.js 这样的文件稍后加载到 DOM 中。这就是为什么 DOM 在开始时没有意识到 .controller() 或 .service() 等的 angular 语法。因此你的全局 'flash' 函数之一（指示符或工厂）被覆盖了。

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

我希望这解释清楚了。

- Vineet 'DEVIN' Dev

Answer 2

重命名我的文件名以及指令内部的函数解决了问题。

- thank_you