从控制器关闭模态不工作

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

我有这样的表格

    <modal title="Error" 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>

当我点击 closemodal like

时，我试图关闭模态

$scope.closemodal = function(scopename)
{
 $scope[scopename] = false;
}

我试图通过将属性设置为 false 来关闭模型。但它不起作用。我该如何解决？

Answer 1

像这样使用ng-show，而不是visible：

<modal title="Error" id='errormessage' ng-show="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>
</modal>

现在检查上面的代码并传递一个变量而不是一个值： ng-click="closemodal('errormessage')

Answer 2

当 A 作用域继承原语时，在父作用域中更改它不会对继承的作用域进行更改，在您的情况下是指令作用域。

您应该向指令传递一个对象，而不是原始类型。

在这里阅读更多内容：

Answer 3

这是您要找的吗：

angular.module('my-app', [])
.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" ng-click="closemodal()">&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,
      link: function postLink(scope, element, attrs) {
        scope.modalTitle = attrs.title;
        scope.showModal = true;

        scope.closemodal = function () {
          scope.showModal = false;
        };
      }
    };  
  });

这里的工作示例： http://codepen.io/cgav/pen/bVNEYz?editors=101

从控制器关闭模态不工作

Close modal from controller not working

angularjs

bootstrap-modal