javascript - 多个模态的可见属性未定义

Question

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

这些是我的模式切换功能:

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

当我切换模态时，通过日志记录，我发现在 attrs.visible 的 $watch 内部，它的值对于模态 2 和 3 是未定义的，而对于模态 1 来说它按预期工作。我试图思考为什么会这样正在发生，但我想不出为什么这应该在第一种情况下起作用而不是在其他两种情况下起作用的原因。任何关于为什么会发生这种情况的指示将不胜感激。

Answer 1

根据您迄今为止收到的回复，听起来您已经对代码进行了一些重构。我会推荐一个模态指令，您可以为每个实例提供不同的内容(因为无论如何您都会嵌入内容)，并且该指令应该使用隔离范围。它是一个模式对话框，因此应将其视为完全独立的实体。它永远不应该尝试接触其父级。单击“关闭”、“取消”、“确定”或任何关闭模式的按钮后，应发出(而不是广播)容器应监听的事件，然后应关闭模式(即模式不应自行解散，或“自毁”)。