总是从最后一个模态 html 中获取标题的指令

Question

我有下面的代码

'use strict';
 angular.module('abc.directives', [])
.directive('modal', function () {
    return {
      template: '<div class="modal fade">' + 
          '<div class="modal-dialog">' + 
            '<div class="modal-content">' + 
              '<div class="modal-header">' + 
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
                '<h4 class="modal-title">{{ modalTitle }}</h4>' + 
              '</div>' + 
              '<div class="modal-body" ng-transclude></div>' + 
            '</div>' + 
          '</div>' + 
        '</div>',
      restrict: 'E',
      transclude: true,
      replace:true,
      scope:true,
      link: function postLink(scope, element, attrs) {
        scope.modalTitle = attrs.title;

        scope.$watch(attrs.visible, function(value){
          if(value == true)
            $(element).modal('show');
          else
            $(element).modal('hide');
        });

        $(element).on('shown.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = true;
          });
        });

        $(element).on('hidden.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = false;
          });
        });
      }
    };  
  });

和html喜欢

<modal title="success" id='successmessage' visible="successmessage">
    <form role="form">
        Action was uccesful
        <span class="clearfix"></span>
        <button type="submit" class="btn btn-primary" ng-click="closemodal('successmessage');>Ok</button>
    </form>
</modal>    
<modal title="Error" id='errormessage' visible="errormessage">
<form role="form">
    Action was not Succesful
    <span class="clearfix"></span>
    <button type="submit" class="btn btn-primary" ng-click="closemodal('errormessage');>Ok</button>
</form>

所有功能都运行良好。但在模态 header 标题总是显示为

Error

即最后一个模式的标题 windows。即使我打开成功 window 也是同样的情况。我该如何解决这个问题？

这是 JSfiddle link:http://jsfiddle.net/98v0pozz/4/

Answer 1

您已将成功模式的标题设置为'Error'。

试试这个：

<modal title="Success" id='successmessage' visible="successmessage">
    <form role="form">
        Action was uccesful
        <span class="clearfix"></span>
        <button type="submit" class="btn btn-primary" ng-click="closemodal('successmessage');>Ok</button>
    </form>
</modal>    
<modal title="Error" id='errormessage' visible="errormessage">

Answer 2

添加 "id" 到模态标签：

<modal id="0" title="Login form" visible="showModal">
<modal id="1" title="Login form1" visible="showModal1">

在控制器中：

$scope.titles = [];
$scope.toggleModal = function(){
    $scope.showModal = !$scope.showModal;
    $scope.title = $scope.titles["0"];
};
 $scope.toggleModal1 = function(){
    $scope.showModal1 = !$scope.showModal1;
    $scope.title = $scope.titles["1"];
};

在指令中：

scope.titles[attrs.id] = attrs.title;

总是从最后一个模态 html 中获取标题的指令

Directive taking title from the last modal html always

angularjs

bootstrap-modal