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