Не работает угловой загрузочный модальный интерфейс

Question

Не работает угловой загрузочный модальный интерфейс

0

Я новичок в угловой и бутстрап. Это мой Plunk. Это мой код DemoController:

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>

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

user2323308 05 нояб. 2015, в 10:33

Источник

Теги:

angularjs

angular-ui-bootstrap

2 ответа

0

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

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

Errorpro 05 нояб. 2015, в 08:32

Ещё вопросы

Fissio · Accepted Answer · 2015-11-05T08-13-00.000Z

Здесь работает плункер, основанный на вашем собственном плунге: http://plnkr.co/edit/VDDyDuBoZ30tAk2kQKoc?p=preview

Список изменений:

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

Наконец, в script.js внесено несколько изменений, в результате 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 - это функция, которая выполняется при нажатии кнопки Open modal. В функции мы инициализируем переменную modalInstance, которая является $modal.open функции $modal.open. Мы также обрабатываем модальный результат внутри this.modal функции, а не вне ее.

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