Как показать и скрыть элемент в моем случае

Question

Как показать и скрыть элемент в моем случае

0

Я пытаюсь создать директивную модальность, поэтому я могу использовать ее на другом месте.

Я хочу, чтобы модальный поп, когда пользователь что-то делал. Я использую ng-show, чтобы скрыть это.

мой html

 <my-modal ng-show="showModal" data-text="my text"></my-modal>

моя директива

angular.module('myApp').directive('myModal', ['$modal',
    function($modal) {
        return {
            restrict: 'E',
            scope: false,
            link: function(scope, elem, attrs) {              
                $modal({
                    template: '<div>{{scope.attrs.text}}</div>'
                    scope: scope,
                });
            }
        };
    }
]);

Мой контроллер

angular.module('myApp').controller('tCtrl', ['$scope',
    function($scope) {
        $scope.showModal = false;
    }
}])

По какой-то причине я не могу скрыть модальность, и она всегда появляется, когда первая страница загружается. Как я могу скрыть его, когда страница загружается? Спасибо за помощь!

BonJon 02 июль 2015, в 01:45

Источник

Теги:

angularjs

modal-dialog

using-directives

1 ответ

Ещё вопросы

yvesmancera · Answer 1 · 2015-07-01T22-26-00.000Z

Функция ссылки запускается сразу после загрузки директивы, поэтому в вашем случае, если вы хотите показать свой модальный раз $ scope.showModal = true, вам нужно изменить свою директиву:

angular.module('myApp').directive('myModal', ['$modal',
    function($modal) {
        return {
            restrict: 'E',
            scope: {
              display: '=',
            },
            link: function(scope, elem, attrs) {            

              scope.$watch('display', function(newVal, oldVal) {
                if(newVal !== oldVal && newVal) {
                  $modal({
                      template: '<div>{{scope.attrs.text}}</div>',
                      scope: scope
                  });
                }
              });
            }
        };
    }
]);

И измените свой html на

<my-modal display="showModal" data-text="my text"></my-modal>