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即可隐藏或显示您的模态！

e.g。 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 );
}());

从Angularjs中的控制器关闭模态

1 个答案: