Question

我试图弄清楚如何在一个地方创建一个引导警报消息，并从我的angularjs应用程序中的任何位置动态设置消息和messageType。

我目前有一个方法可以做到这一点但是，为了让我在每个控制器上调用它，我必须将代码复制并粘贴到每个视图和控制器上。这不是正确的代码重用。

我非常感谢你的帮助。

(function() {
  'use strict';

  angular
    .module('app.widgets')
    .directive('alertMessage', alertMessage)
    .controller('AlertController', AlertController);

  /* @ngInject */
  function alertMessage() {

    var directive = {
      link: link,
      restrict: 'A',
      templateUrl: 'app/widgets/alertmessage.html',
      scope: {
        messageType: '<',
        Message: '@',
        hasError: '<',
        show: '<',
      }
    };
    return directive;

    function link(scope, element, attrs) {


    }
  }

  AlertController.$inject = ['coreservice', '$scope'];

  function AlertController(coreservice, $scope) {

    console.log();

  }
})();

<!DOCTYPE html>
<html ng-app="app" ng-strict-di>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <base href="/" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

</head>

<body ng-controller="Main">


  <div ng-if="$ctrl.show" ng-class="{ 'alert alert-danger alert-dismissible fade in':$ctrl.hasError, 'alert alert-success alert-dismissible fade in':!$ctrl.hasError }" role="alert" ng-hide="$ctrl.closeAlert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="$ctrl.closeAlert=true"><span aria-hidden="true">×</span></button>
    <h4>{{$ctrl.Message}}</h4>
  </div>


  <div ui-view></div>

  <!-- Bootstrapping -->
  <script src="main.js"></script>
  <!-- Reusable Modules -->
  <!-- core module -->
  <script src="app/core/core.module.js"></script>
  <script src="app/core/core.service.js"></script>
  <!--widgets/shared-->
  <script src="app/widgets/widgets.module.js"></script>
  <script src="app/widgets/alertmessage.js"></script>

</body>

</html>

angularjs v1.5.8全局动态警报消息

0 个答案: