Question

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

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

处理存储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);
  }
}

我的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中显示的flash消息没有加载。

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

但是关于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

当然，重命名文件名必须解决您的问题。但问题是，为什么它早在localhost上工作？我想在localhost上立即加载你所有的javascript文件，各个工厂和指令的函数'flash'都被正确注册。

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

可能的原因可能是angularjs的库文件（来自您的服务器或cdn）比您的文件（如controller.js，service.js或directive.js）稍晚加载到DOM中。这就是为什么DOM在开始时没有识别.controller（）或.service（）等的角度语法。因此，你的一个全局“闪光”功能（指令或工厂）被覆盖了。

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

我希望这可以解释。

Answer 2

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

指令/工厂不在生产中

2 个答案: