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

观点：

<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

正如Angular controller docs建议的那样，如果您想跨多个控制器共享代码或状态，请使用服务。

添加一个参数后，您可以使用MessageService作为实用程序。你的控制器显然会实现常见的功能，无论如何都是如此。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

简单回答：服务。在服务中包含所有应用程序逻辑。然后你可以简单地注入任何控制器并在你的应用程序的任何地方使用它。

由于这个案例没有很多逻辑，而且它真的与视图连接，所以你可以制作一个自定义指令。

如果你试图制作一个tosatr还有一些已经实现的音调。不要重新发明轮子。

我希望有所帮助。祝你好运

AngularJS在多个控制器中使用函数

2 个答案: