Question

我希望有一个bootstrap 3警报，以显示用户可以在页面上执行的所有操作的一般错误或成功消息。页面分为不同的部分，每个部分使用不同的控制器，如下所示：

<body ng-app="app">
  <div ng-controller="securityController">
    [controller methods for change password, validate user section, ...]
    <div ng-controller="salesController"> 
      <div class="alert" ng-show="message.visible"><strong>{{message.title}}</strong>{{message.text}}</div></div>
      [controller methods for admin sales, admin products, admin retails, ...]
    </div>
  </div>
</body>

然后我希望能够将这个html绑定到控制器中想要在用户在页面中执行操作时显示消息的所有模型（Ej。安全消息，当它与securityController方法交互时，验证消息时它与salesController方法交互）

首先，我认为级联控制器并使它们具有警报HTML中使用的绑定变量名称的模型可以工作（Ej。在securityController和salesController中有$ scope.message对象）但它没有＆＃39工作，我真的不认为这是正确的方法。

我怎样才能做到这一点？

Answer 1

我想用Bootstrap的模态做类似的事情，以便在发生任何错误时将其显示给用户。

首先是服务：

.service('ErrorService', function() {
    var error;

    this.setError = function(value) {
        error = value;
    };

    this.getError = function() {
        return error;
    };

    this.clearError = function() {
        error = undefined;
    };
})

然后是一个指令，它查看服务的getError并在服务返回某个值时显示自己：

.directive('errorModal', ['ErrorService', 
    function(ErrorService) {
        return {
            link: function($scope, iElm, iAttrs, controller) {
                $scope.$watch(ErrorService.getError, function(newVal, oldVal) {
                    if (newVal) {
                        // service returned something, display this modal foe further!
                    }
                });
            }
        };
    }
]);

如果你想设置错误，可以从任何控制器设置任何其他JS代码（当然你已经注入了服务！）只需：

ErrorService.setError(someError);

我在index.html的HTML代码中只包含一次指令：

<div error-modal></div>

希望这有帮助。

Answer 2

以下是我为其中一个应用编写的示例代码。

演示：http://plnkr.co/edit/pGhKOTtqFxpD4fukhQrl?p=preview

<强>指令：

app.directive('alert', function(alertService) {
  return {
    restrict: 'AE',
    link: function(scope, e, a, ctl) {
      scope.alert = alertService.alertObj;
    },
    template: '<div class="alert" ng-class="alert.type" ng-show="alert.show">{{alert.msg}}</div>'
  };
});

服务：使用指令链接多个控制器。

app.service('alertService', function() {
  var me = this;
  me.alertObj = {
    show: false,
    msg: '',
    type: 'alert-success'
  };
  me.alertShow = false;
  me.alertTypes = ['alert-success', 'alert-info', 'alert-warning', 'alert-danger'];
  me.alert = function(type, msg) {
    me.alertObj.msg = msg;
    me.alertObj.type = me.alertTypes[type];
    me.alertObj.show = true;
  };
  me.success = function(msg) {
    me.alert(0, msg);
  };
  me.info = function(msg) {
    me.alert(1, msg);
  };
  me.warning = function(msg) {
    me.alert(2, msg);
  };
  me.danger = function(msg) {
    me.alert(3, msg);
  };
  me.hide = function() {
    console.log('hiding');
    me.alertObj.show = false;
  };
  return this;
});

控制器：样本控制器

app.controller('ctl1', function($scope, alertService) {
  $scope.name = 'World';
  $scope.showAlert = function() {
    alertService.success("This is an success alert");
  };
});

HTML：

<alert></alert>
  <div ng-controller="ctl1">
    <button ng-click="showAlert()">ctl1 - Success alert</button>
  </div>
  <div ng-controller="ctl2">
    <button ng-click="showAlert()">ctl2 - Warning alert</button>
  </div>
  <div ng-controller="ctl3">
    <button ng-click="showAlert()">ctl3 - Danger alert</button>
  </div>
  <div ng-controller="ctl4">
    <button ng-click="showAlert()">ctl4 - Info alert</button>
    <button ng-click="hide()">Clear Alert</button>
  </div>

AngularJS - 多个控制器的单一警报div

2 个答案: