1

Доброго дня!

Странные вещи происходят в моём коде. Надо мне в модальное окошко одну переменную передать. Я её в data-whatever ссылки прописываю,

<a class="btn btn-default btn-xs" href="" data-toggle="modal" data-target="#dishCard" data-whatever="{{dish.id}}">
         <i class="fa fa-info-circle fa-lg"></i>
       </a>

через jQuery её передаю и начинается магия. Если так:

$('#dishCard').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget)
          $scope.dish_id = button.data('whatever')
          toastr.info('Dish.ID: '+button.data('whatever'))
    });

то передаётся нормально. Если же без тостера, то есть так:

$('#dishCard').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget)
          $scope.dish_id = button.data('whatever')
    });

то ничего никуда не передаётся. Я уже голову сломал, подскажите, почему такое происходит, что я делаю не так? И есть ли более разумный способ отдавать данные в модальное окно?

1
  • Кнопка должна быть директивой, или на кнопке висеть директива. И в директиве уже ловить передаваемое значение через аттрибуты scope объекта
    – zhenyab
    12 авг 2015 в 12:13

1 ответ 1

1

Не получилось запустить код с toastr. Похоже имеет место быть переопределение переменных. Не уверен. А может быть вам просто надо использовать $apply()? Положим, что все элементы у вас определены в одном контроллере. Тогда $('#dishCard').on - это просто слушатель события, это не какая-то конкретная функция внутри $scope, именно поэтому, когда вызывается слушатель, то он назначает видимым в $scope переменным (dish_id) значения, но как модуль-то об этом узнает? Попробуйте просто:

$('#dishCard').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget)
    $scope.$apply(function() {
        $scope.dish_id = button.data('whatever');
    });
});

Пример

var app = angular.module('app', []);

app.controller('Ctrl', ['$scope',
  function($scope) {
    $scope.dishes = [{
      id: 1,
      name: 'Рагу'
    }, {
      id: 2,
      name: 'Пюре'
    }, {
      id: 3,
      name: 'Каша'
    }];
    $('#dishCard').on('show.bs.modal', function(event) {
      var button = $(event.relatedTarget);
      $scope.$apply(function() {
        $scope.dish_id = button.data('whatever');
      });
    });
  }
]);
<!DOCTYPE html>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  <script src="script.js"></script>
</head>

<body ng-app="app" ng-controller="Ctrl">
  <div class="container">
    <div ng-repeat="dish in dishes">
      <a class="btn btn-default btn-xs form-control" href="" data-toggle="modal" data-target="#dishCard" data-whatever="{{dish.id}}">
        <span class="fa fa-info-circle fa-lg">{{dish.name}}</span>
      </a>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="dishCard" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">ID of the dish</h4>
          </div>
          <div class="modal-body">
            <p>{{dish_id}}</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>

</html>

Ваша цель не совсем ясна. Мы как бы нажимаем на кнопку и должны получить значение элемента модели по значению параметра. Для меня выходит за рамки фантазии, как это можно сделать накидывая во view контроллера кучу разметки. По идее, процесс должен быть каким-то другим. Если он такой, как я описал выше, то, вероятно, показывать собственную директиву в тосте куда проще.

Пример

Modal (ui.bootstrap.modal)

var app = angular.module('app', ['ngAnimate', 'ui.bootstrap']);
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log',
  function($scope, $modal, $log) {
    $scope.dishes = [{
      id: 1,
      name: 'Рагу',
      count: 3
    }, {
      id: 2,
      name: 'Пюре',
      count: 4
    }, {
      id: 3,
      name: 'Каша',
      count: 100500
    }];

    $scope.animationsEnabled = true;

    $scope.open = function(dish) {
      var modalInstance = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        resolve: {
          dish: function() {
            return dish;
          }
        }
      });

      modalInstance.result.then(null, function() {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  }
]);

app.controller('ModalInstanceCtrl', ['$scope', 'dish', '$modalInstance',
  function($scope, dish, $modalInstance) {
    $scope.dish = dish;
    var old = dish.count;

    $scope.ok = function() {
      $modalInstance.close();
    };

    $scope.cancel = function() {
      $scope.dish.count = old;
      $modalInstance.dismiss('cancel');
    };
  }
]);
<!doctype html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
  <script src="app.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3 class="modal-title">Dish</h3>
      </div>
      <div class="modal-body">
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon1">{{dish.name}}</span>
          <input type="number" class="form-control" placeholder="count" aria-describedby="basic-addon1" ng-model="dish.count">
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </div>
    </script>
    <div class="container">
      <div ng-repeat="dish in dishes">
        <button type="button" class="btn btn-default form-control" ng-click="open(dish)">{{dish.name}} {{dish.count}}</button>
      </div>
    </div>
  </div>
</body>

</html>

3
  • 1
    Цель - вывести список объектов из БД, чтобы при нажатии на каждый вылезало модальное окно с параметрами этого объекта. 14 авг 2015 в 6:44
  • @ИванФеофанов, возможно, вам подойдет второй вариант, только надо подумать о кешировании уже полученных данных, если количество вызываемых объектов достаточно велико.
    – oshliaer
    14 авг 2015 в 9:54
  • Спасибо, ваш вариант как раз то, что мне было нужно. 19 авг 2015 в 5:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.