Question

我试图在我的单页应用程序中包含2-3个模态。但我无法让所有这些工作同时工作。我的第一个模态正常工作，但我的第二个和第三个模态无法观察可见属性。

这些是我的模态切换功能：

$scope.toggleModal = function(){
    $scope.showModal = !$scope.showModal;
};

$scope.toggleTestModal = function(){
    $scope.showTestModal = !$scope.showTestModal;};

$scope.toggleBranchSelectModal = function(){
  $scope.showBranchSelectModal = !$scope.showBranchSelectModal;
  console.log('$scope.showBranchSelectModal', $scope.showBranchSelectModal);
};

这些是我对这三种模式的指示：

模态1

cicdapp.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">{{ title }}</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.title = attrs.title;

    scope.$watch(attrs.visible, function(value){
      console.log(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;
      });
    });
  }
};
});

模态2

cicdapp.directive('testmodal', function () {
console.log('Test modal')
  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">{{ title }}</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.title = attrs.title;

      scope.$watch(attrs.visible, function(value){
        console.log(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;});});}};});

模态3

cicdapp.directive('branchselectmodal', 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">{{ title }}</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.title = 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;
        });
      });
    }
  };
});

当我切换模态时，通过我记录我认为在$ watch for attrs.visible中，它的值未定义为模态2和3，而它的工作方式与模态1的预期相同。我试图想为什么这是发生了，但我想不出为什么这应该在第一种情况下起作用而不在另外两种中起作用的原因。关于为什么会发生这种情况的任何方向都将受到赞赏。

Answer 1

根据你到目前为止所做的回应，听起来你已经在某种程度上重构了你的代码。我会建议一个模式的指令，你给每个实例不同的内容（因为你无论如何都要转录内容），并且指令应该使用隔离范围。这是一个模态对话框，因此应将其视为完全独立的实体。它永远不应该试图进入其父母。点击“关闭”，“取消”，“确定”，或任何按钮解除模态，应该发出（不广播）容器应该监听的事件，然后它应该关闭模态（即模态不应该解雇自己，或“自我毁灭”）。

可见属性未定义多个模态

1 个答案: