Модальное окно Angular-ui открывается только один раз

У меня есть угловое приложение, которое использует angular-ui. Мне нужно модальное окно. Мой шаблон модального окна:

<div modal="shouldBeOpen" close="close()" options="opts">
        <div class="modal-header">
            <h3>Create new entry</h3>
        </div>
        <div class="modal-body" ng-repeat="e in create_elements">
            {{e}}
        </div>

        <div class="modal-footer">
          ...
        </div>
</div>

и обработчик для открытия и закрытия:

$scope.open = function(){        
    $scope.shouldBeOpen = true; 
}


$scope.close = function(){        
    $scope.shouldBeOpen = false; 
}

Но он открывается только 1 раз, последующее нажатие на кнопку открытия не дает никаких эффектов. Как это исправить?

Спасибо.


angularjs angular-ui
person 0xAX    schedule 17.08.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Создал plunkr с решением: Модальный диалог AngularJS — plunkr

Работает отлично.

person Patrick    schedule 17.08.2013

arrow_upward
0
arrow_downward

Я создал еще одну попытку jsfiddle с кодом, похожим на ваш. Следует отметить, что щелчок вне модального окна вызывает close(), однако для ясности я включил кнопку. Код почти не изменился.

http://jsfiddle.net/priyaranjan/dDjWe/

Разметка

<div ng-app="myApp" ng-controller="myCtrl">
   <button class="btn" ng-click="open()">Open me!</button>
    <div modal="shouldBeOpen" close="close()" options="opts">
        <div class="modal-header"><h3>Create new entry</h3></div>
        <div class="modal-body">body</div>
        <div class="modal-footer">
            <button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
        </div>
    </div>
</div>

JavaScript

angular.module('myApp', ['ui.bootstrap'])
    .controller('myCtrl',
        function($scope){

            // code from so post
            $scope.open = function(){
                $scope.shouldBeOpen = true;
            };

            $scope.close = function(){
                $scope.shouldBeOpen = false;
            };
        }
);

Не стесняйтесь проверить документацию angular для модального окна.

person Priya Ranjan Singh    schedule 18.08.2013