AngularJS Использование функции в нескольких контроллеров

Question

код в контроллере:

var type = null; 
    var title = null; 
    var content = null; 

    function showMessage(type, title, content) { 
     $scope.displayMessage = true; 
     $scope.message = { 
     type: type, 
     title: title, 
     content: content 
     } 
     $timeout(function() { 
      $scope.fadeMessageSuccess = true; 
     }, 3000); 
    }; 

    var type = "success"; 
    var title = "Thanks for registering!"; 
    var content = "Your account has successfully been created!"; 
    showMessage(type, title, content); 

выше мой код, что я работаю с, и это внутри контроллера в настоящее время. Он отлично работает, но я хочу его очистить и использовать и использовать в нескольких контроллерах. Как я могу идти о оберточной эту часть в функцию, которая будет использоваться по всему приложению, а затем только того, чтобы вызвать последние 4 строки в моих контроллеров:

var type = null; 
    var title = null; 
    var content = null; 

    function showMessage(type, title, content) { 
     $scope.displayMessage = true; 
     $scope.message = { 
     type: type, 
     title: title, 
     content: content 
     } 
     $timeout(function() { 
      $scope.fadeMessageSuccess = true; 
     }, 3000); 
    }; 

Я только хочу, чтобы написать следующий код каждый раз, когда я хочу показать сообщение:

var type = "success"; 
var title = "Thanks for registering!"; 
var content = "Your account has successfully been created!"; 
showMessage(type, title, content); 

The View:

<div ng-controller="AccountCtrl" ng-cloak=""> 
    <div class="ui {{message.type}} message message-overwrite" 
     ng-class="{'fade': fadeMessageSuccess} " 
     ng-show="displayMessage"> 
    <div class="header"> 
     {{message.title}} 
    </div> 
    <p>{{message.content}}</p> 
    </div> 
</div> 

Answer 1

Простой ответ: служба . Отключите всю свою логику приложения в сервисах. Затем вы можете просто ввести его в любой контроллер и использовать его в любом месте приложения.

Поскольку этот случай не имеет много логики, и это действительно связано с представлением, тогда вы можете создать настраиваемую директиву.

Еще одна вещь, если вы пытаетесь сделать tosatr, есть тоны уже реализованных. Не изобретайте велосипед.

Я надеюсь, что это поможет. Удачи

Answer 2

Как угловое controller docs, предположите, что если вы хотите использовать общий код или состояние через несколько контроллеров, воспользуйтесь услугой.

С добавлением одного аргумента вы можете использовать MessageService в качестве утилиты. Разумеется, вы, регуляторы, реализуете общие функции, которые в любом случае будут иметь место.

angular.module('app', []); 
 
angular.module('app') 
 
    .factory('MessageService', function() { 
 
    return { 
 
     showMessage: function(ctrl, type, title, content) { 
 
     ctrl.displayMessage = true; 
 
     ctrl.message = { 
 
      type: type, 
 
      title: title, 
 
      content: content 
 
      } 
 
      //... 
 
     } 
 
    }; 
 
    }) 
 
    .controller('First', ['MessageService', 
 
    function(MessageService) { 
 
     var self = this; 
 
     self.displayMessage = false; 
 
     self.message = {}; 
 
     self.firstSrvc = function() { 
 
     MessageService.showMessage(self, "type", "title", "content"); 
 
     }; 
 
    } 
 
    ]) 
 
    .controller('Second', ['MessageService', 
 
    function(MessageService) { 
 
     var self = this; 
 
     self.displayMessage = false; 
 
     self.message = {} 
 
     self.secondSrvc = function() { 
 
     MessageService.showMessage(self, "type2", "title2", "content2"); 
 
     }; 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="First as f"> 
 
    <div ng-controller="Second as s"> 
 
     <h3>First: {{f.displayMessage}}</h3> 
 
     <div ng-show="f.displayMessage"> 
 
     <h3>{{f.message.type}}, {{f.message.title}}, {{f.message.content}}</h3> 
 
     </div> 
 
     <h3>Second: {{s.displayMessage}}</h3> 
 
     <div ng-show="s.displayMessage"> 
 
     <h3>{{s.message.type}}, {{s.message.title}}, {{s.message.content}}</h3> 
 
     </div> 
 
     <div> 
 
     <button ng-click="f.firstSrvc()">First</button> 
 
     <button ng-click="s.secondSrvc()">Second</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>