Директива/Factory Не работает в производстве

У меня есть директива, которая выводит флеш-сообщения для пользователей. Все работает отлично на моем localhost, но как только я проверю его на 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);
     }
  }
}

И factory, который обрабатывает флэш-сообщения.

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 не загружается.

Это то, что показано в 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 в своем коде через.

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

Мой вопрос: почему это не отображается в моем производственном коде, но появляется на моем локальном хосте и как его исправить?

Ответ 1

Переименование имени моего файла и внутренней функции внутри моей директивы разрешило проблему.

Ответ 2

Конечно, переименование имени файла должно решить вашу проблему. Но вопрос в том, почему он работал раньше на локальном хосте? Я думаю, что на локальном хосте все ваши файлы javascript загружаются мгновенно, и функция "flash" соответствующих factory и директив правильно зарегистрирована.

Но работая на геройку или на любом другом удаленном сервере, вы столкнетесь с проблемой, поскольку контроллер или директива могут регистрировать разные функции "flash", чем те, которые они должны регистрировать.

Возможной причиной может быть то, что файл библиотеки angularjs (с вашего сервера или cdn) был загружен в DOM немного позже, чем ваши файлы, такие как controller.js, service.js или directive.js. Вот почему DOM не распознал синтаксис angular.controller() или .service() и т.д. При запуске. И, следовательно, одна из ваших глобальных "вспышек" (директива или factory) была переопределена.

Прежде всего, я бы предложил вам переименовать, что вы уже сделали, а во-вторых, не использовать глобальные функции внутри директивы или factory.

Надеюсь, это объяснит.