Angularjs中控制器关闭模式

Question

问题问题 -

我已经创建了一个自定义模态指令，现在试图从控制器关闭它，但目前为止没有成功。我肯定做错事的指令

//我的指令

angular.module('app').directive('modalDialog',function(){ 
    return{ 
     restrict: 'AE', 
     scope: { 
      show: '=' 
     }, 
     replace: true, 
     transclude: true, 
     link: function(scope, element, attrs) { 
      scope.hideModal = function() { 
       scope.show = false; 
      }; 
     }, 
     template: "<div class='ng-modal' ng-show='show'>" + 
      "<div class='ng-modal-overlay'></div>" + 
      "<div class='ng-modal-dialog'>"+ 
      "<div class='ng-modal-dialog-content' ng-transclude></div>"+ 
      "</div>"+ 
      "<button class='ng-modal-close' ng-click='hideModal()'>Close</button>"+ 
      "</div>" 
    } 
}); 

//我控制器

(function() { 
    var myController = function($scope){ 

     $scope.newAdd = function(){ 
      if($scope.form.$valid){ 
       $scope.hideModal();//this is not working :( 
      }else{ 

      } 
     } 
    }; 
    myController .$inject = ['$scope']; 
    angular.module('app').controller('myController ',myController); 
}()); 

更新1

有在我的模型形式为好。这里是plunker

当我点击添加按钮，它应该关闭模式，如果这两个领域都存在

任何人都可以帮我吗？非常感谢

Answer 1

在您使用modalDialog指令的标记中，可以使用show属性指定控制模态可见性的作用域属性。所以只需将其设置为true即可隐藏或显示您的模态！

例如HTML：

<modal-dialog show="modalVisible"><!--content goes here --></modal-dialog> 

在控制器：

(function() { 
    var myController = function($scope){ 
     $scope.modalVisible = true; 

     $scope.newAdd = function(){ 
      if($scope.form.$valid){ 
       $scope.modalVisible = false; 
      }else{ 

      } 
     } 
    }; 
    myController .$inject = ['$scope']; 
    angular.module('app').controller('myController ',myController); 
}());