Directive/Factory 未投入生产

Question

我有一个指令可以为用户打印出即显消息。在我的本地主机上一切正常，但一旦我在 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);
     }
  }
}

以及处理存储即显消息的工厂。

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

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

Answer 1

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

Answer 2

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

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

一个合理的原因可能是 angularjs 的库文件（从您的服务器或 cdn）加载到 DOM 比您的文件 controller.js、service.js 或 directive.js。这就是为什么 DOM 在开始时无法识别 .controller() 或 .service() 等的 angular 语法的原因。因此，您的全局 'flash' 函数（指令或工厂）之一被覆盖。

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

我希望这能解释清楚。

Directive/Factory 未投入生产

Directive/Factory Not Working in Production

javascript

flash

heroku

angularjs