Chỉ thị/Nhà máy không hoạt động trong sản xuất

Question

Tôi có chỉ thị in ra thông báo flash cho người dùng. Mọi thứ hoạt động tốt trên localhost của tôi nhưng ngay sau khi tôi thử nghiệm nó trên Heroku, thông báo flash không xuất hiện. Đây là bộ điều khiển.

angular.module("alerts") 

.controller("AlertsController", alertController) 

alertController.$inject = ['Flash'] 

function alertController(Flash) { 
    var vm = this; 

    vm.flash = Flash; 
} 

Chỉ thị ...

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

Và các nhà máy xử lý lưu trữ các tin nhắn 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); 
    } 
} 

mã html của tôi ...

<div ng-controller="AlertsController as alerts"> 
    <div ng-repeat="message in alerts.flash.messages"> 
    <flash type="message.type" text="message.text"></flash> 
    </div> 
</div> 

Không có lỗi xuất hiện trên console. Điều thú vị là thông báo flash được trình bày trong html không tải.

Đây là những gì được hiển thị trong máy chủ cục bộ.

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

Nhưng về sản xuất Heroku

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

tôi là tạo ra các flash trong mã của tôi qua ..

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

Câu hỏi của tôi là, tại sao điều này không xuất hiện trên mã sản xuất của tôi nhưng nó xuất hiện trên localhost của tôi và làm thế nào để sửa nó?

Answer 1

Đổi tên tên tệp của tôi và chức năng nội bộ bên trong chỉ thị của tôi đã giải quyết được sự cố.

Answer 2

Tất nhiên, đổi tên tên tệp phải giải quyết được sự cố của bạn. Nhưng câu hỏi đặt ra là, tại sao nó hoạt động trước đó trên localhost? Tôi nghĩ rằng trên localhost tất cả các tập tin javascript của bạn được tải ngay lập tức và chức năng 'flash' của nhà máy tương ứng và chỉ thị đã đăng ký chính xác.

Nhưng chạy trên heroku hoặc bất kỳ máy chủ từ xa nào khác, bạn sẽ gặp sự cố khi bộ điều khiển hoặc chỉ thị có thể đăng ký chức năng 'flash' khác với chức năng mà chúng phải đăng ký.

Lý do chính đáng có thể là tệp thư viện của angularjs (từ máy chủ hoặc cdn) của bạn đã được tải vào DOM một chút sau các tệp của bạn như controller.js, service.js hoặc directive.js. Đó là lý do tại sao DOM không nhận ra cú pháp góc của .controller() hoặc .service(), vv khi bắt đầu. Và do đó một trong những chức năng 'flash' toàn cầu của bạn (chỉ thị hoặc nhà máy) bị ghi đè.

Trước hết, tôi khuyên bạn nên đổi tên, mà bạn đã làm và thứ hai, không sử dụng các chức năng toàn cầu bên trong chỉ thị hoặc nhà máy.

Tôi hy vọng điều này giải thích.