无法按功能关闭模式窗口

Question

我正在使用模态

<modal title="Success" id='successmessage' visible="successmessage">
    <form role="form">
            Success ful result.
<button type="submit" class="btn btn-primary"  ng-click="closesuccessmessage()" >Ok</button>
    </form>
</modal>    

我有一个关于模态的指令..

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

在我的角度控制器中，我创建了如下函数

$scope.closesuccessmessage = function()
{
  $scope.successmessage = false;
}

但它没有任何作用。我怎样才能让它工作。因为从函数中控制它对我来说非常重要。模态打开真值，但不关闭假值。

Answer 1

为了让 angularjs 绑定变量以查看期望表达式的属性之外，您必须使用括号。

<modal title="Success" id='successmessage' visible="{{successmessage}}">
    <form role="form">
            Success ful result.
<button type="submit" class="btn btn-primary"  ng-click="closesuccessmessage()" >Ok</button>
    </form>
</modal>   

但是我不确定 visible 是 HTML 中的有效属性。如果您想使用变量隐藏模式，您可以使用 ng-show 并在控制器中设置成功消息变量

<modal title="Success" id='successmessage' ng-show="successmessage">
    <form role="form">
            Success ful result.
<button type="submit" class="btn btn-primary"  ng-click="closesuccessmessage()" >Ok</button>
    </form>
</modal>   

Answer 2

你不能像上面那样使用你正在做的事情。您应该调用模态hide 函数来隐藏模态。试试下面的sn-p

$scope.closesuccessmessage = function()
{
  $("#successmessage").modal('hide');
}

编辑

并不是说您不能在 HTML 中使用范围值。如果您的控制器相同，则可以轻松访问它。我改变了你的 HTML。请尝试以下一个

<modal title="Success" id='successmessage' data-ng-show="successmessage">

改为

<modal title="Success" id='successmessage' visible="successmessage">