Question

我有一个指令，每次邮件调用成功/失败时都会显示一条警告消息。第一个帖子的警报总是成功，但如果我关闭警报，并触发另一个帖子，则警报不再显示。

以下一些代码：

在html中包含标记

<alert message="notification"></alert>

指令

app.directive("alert", function(){
        return{
            restrict: 'EA',
            templateUrl: "alert.html",
            replace: false,
            transclude: false,
            scope: {
                message: "=",
                close: "&"
            },
            link: function(){

            }
        };
    });

模板

<div class="alert alert-{{message.type}}" ng-show="message.text">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <div>{{message.text}}</div>
</div>

更新：http://plnkr.co/edit/mECmQNSgW0EdXZGPmkNx?p=preview

有什么想法吗？

提前致谢。

Answer 1

您可以让关闭按钮调用关闭功能，而不是使用data-dismiss="alert"。然后，关闭功能可以清除通知，因为您在$scope.notification的隔离范围内scope.message：

＆＃13;

var app = angular.module('app', []);

app.controller('AlertDemoCtrl', function($scope) {
  $scope.notification = {};

  $scope.alertNotif = function() {
    $scope.notification.type = "error";
    $scope.notification.text = "demo text";
  };
});


app.directive("alert", function() {
  return {
    restrict: 'EA',
    template: '<div class="alert alert-{{message.type}}" ng-show="message.text">' +
      '<button type="button" class="close" ng-click="close()" aria-hidden="true">&times;</button>' +
      '<div>{{message.text}}</div>' +
      '</div>',
    replace: false,
    transclude: false,
    scope: {
      message: "=",
      close: "&"
    },
    link: function(scope) {
      scope.close = function() {
        scope.message = {};
      }
    }
  };
});

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="AlertDemoCtrl">
    <button ng-click="alertNotif()">test</button>
    <alert message="notification"></alert>
  </div>
</body>

</html>

＆＃13;

Answer 2

根据Bootstrap documentation（强调我的）：

...关闭提醒从DOM中删除。

因为它已从DOM中删除，所以不会再显示...

警报指令在呈现一次后未显示

2 个答案: