Угловой UT bootstrap modal не работает

Я новичок в угловых и бутстрапах. Это мой Plunk. Это мой код DemoController:Угловой UT bootstrap modal не работает

angular.module('app', ['ui.bootstrap']) 
    .controller('demoController', function($modal) { 
    this.message = 'It works!'; 

    key = 1000; 

    this.modalInstance = this.modal = function(){ 
     $modal.open({ 
     controllerAs: 'modalController as modal', 
     templateUrl: 'modal.html', 
     resolve: { 
      key: function() { 
      return key; 
      } 
     } 
     }); 


    }; 

    this.modalInstance.result.then(function (optionSelected){ 
     if(optionSelected == 'yes') 
     { 

     } 
     }); 
    });

ModalController:

angular.module('app') 
.controller('modalController', function($scope, $modalInstance, key) { 


    $scope.featureName = key; 

      $scope.yes = function() { 
       $modalInstance.close('yes'); 
      }; 
      $scope.discard = function() { 
       $modalInstance.close('discard'); 
      }; 
      $scope.goback = function() { 
       $modalInstance.close('goback'); 
      }; 
});

Modal.html:

<script type="text/ng-template" id="modal.html"> 



    <div class="modal-content"> 

    <div class="modal-body"> 
     <p>Do you want to save the changes to {{featureName}} </p> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" ng-click="yes()">Yes</button> 
     <button type="button" class="btn btn-default" ng-click="discard()">Discrad</button> 
     <button type="button" class="btn btn-default" ng-click="goback()">Go Back</button> 
    </div> 
    </div> 

</script>

Index.html:

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
    <script data-require="[email protected]" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="app" ng-controller="demoController as demo"> 
    <h1>{{ demo.message }}</h1> 

    <button class="btn btn-primary" ng-click="demo.modal()">Open modal</button> 



    </body> 

</html>

Я хочу передать данные за m демонстрационный контроллер для модального контроллера. Я хочу иметь отдельный html и контроллер для модального диалога. Как-то это не работает.

источник

2015-11-05 user2323308

Вот рабочая plunker, исходя из собственных шлепнуть: http://plnkr.co/edit/VDDyDuBoZ30tAk2kQKoc?p=preview

Список измененных вещей:

В index.html я добавил Ctrl.js в список загруженных скриптов.
В modal.html удалены теги скриптов, окружающие html. При загрузке модального html из внешнего файла теги скриптов не нужны.

Наконец в script.js сделал несколько изменений, в конечном итоге со следующим:

angular.module('app', ['ui.bootstrap']) 
.controller('demoController', function($modal) { 
    this.message = 'It works!'; 

    var key = 1000; 

    this.modal = function() { 
    var modalInstance = $modal.open({ 
     controller: 'modalController', 
     templateUrl: 'modal.html', 
     resolve: { 
     key: function() { 
      return key; 
     } 
     } 
    }); 
    modalInstance.result.then(function(optionSelected) { 
     if (optionSelected === 'yes') { 
     console.log("Yes selected!") 
     } 
    }) 
    } 
});

В основном, this.modal функция, которая выполняется при нажатии на кнопку Открыть модальной. В функции мы инициализируем переменную modalInstance, которая является вызовом функции $modal.open. Мы также обрабатываем модальный результат внутри функции this.modal, а не вне ее.

источник

2015-11-05 11:05:32 Fissio

Спасибо .. Это сработало для меня. – user2323308

-1

У вас здесь много ошибок. Вот ваш пример:

plnkr.co/edit/47WJrWHW7ueYXBpiYJbA?p=preview

источник

2015-11-05 09:35:42 Errorpro

Угловой UT bootstrap modal не работает

ответ

Смежные вопросы