Direttiva/Fabbrica che non funziona in produzione

Question

Ho una direttiva che stampa messaggi flash per gli utenti. Funziona tutto bene sul mio localhost ma non appena riesco a testarlo su Heroku, il messaggio flash non appare. Ecco il controller.

angular.module("alerts") 

.controller("AlertsController", alertController) 

alertController.$inject = ['Flash'] 

function alertController(Flash) { 
    var vm = this; 

    vm.flash = Flash; 
} 

La direttiva ...

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); 
    } 
    } 
} 

E la fabbrica che gestisce la memorizzazione dei messaggi flash.

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); 
    } 
} 

Il mio codice 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> 

Nessun errore viene visualizzato sulla console. La cosa divertente è che il messaggio flash è presentato nel file HTML non viene caricato.

Questo è ciò che è mostrato in 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> 

Ma sulla produzione Heroku

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

Sto creando il flash nel mio codice via ..

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

La mia domanda è, perché questo non appare sul mio codice di produzione ma appare sul mio localhost e come lo risolvo?

Answer 1

Rinominare il mio nome file e la funzione interna all'interno della mia direttiva ha risolto il problema.

Answer 2

Ovviamente, la ridenominazione del nome del file deve aver risolto il problema. Ma la domanda è: perché funzionava prima su localhost? Penso che su localhost tutti i file javascript vengano caricati istantaneamente e la funzione 'flash' della rispettiva fabbrica e direttiva sia stata registrata correttamente.

Ma in esecuzione su heroku o su qualsiasi altro server remoto, si verificheranno problemi poiché il controller o la direttiva potrebbero registrare diverse funzioni "flash" rispetto a quelle che devono registrare.

Un motivo plausibile potrebbe essere che il file di libreria di angularjs (dal server o cdn) è stato caricato nel DOM un po 'più tardi rispetto ai file come controller.js, service.js o direttiva.js. Ecco perché il DOM non ha riconosciuto la sintassi angolare di .controller() o .service(), ecc all'inizio. Di conseguenza, una delle funzioni globali "flash" (di direttiva o di fabbrica) è stata ignorata.

Prima di tutto ti suggerisco di rinominare, cosa che hai già fatto, e in secondo luogo, non utilizzare le funzioni globali all'interno di direttive o factory.

Spero che questo spieghi.