Good day!

Strange things happen in my code. It is necessary for me to transfer one variable to a modal window. I prescribe it in the data-whatever links,

<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>

I pass it through jQuery and the magic begins. If so:

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

This is normal. If without a toaster, that is:

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

then nothing is transmitted anywhere. I already broke my head, tell me why this is happening, what am I doing wrong? And is there a more reasonable way to send data to a modal window?

  • The button must be a directive, or a directive on the button. And in the directive to catch the transmitted value through the scope attributes of the object - zhenyab

1 answer 1

Could not run the code with toastr . It looks like there is a redefinition of variables. Not sure. Or maybe you just need to use $apply() ? Suppose that all the elements you have defined in one controller. Then $('#dishCard').on is just an event listener, it is not some specific function inside $scope , which is why, when the listener is called, it assigns variables ( dish_id ) to values ​​visible in $scope , but as a module find out about this? Try simple:

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

Example

 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>

Your goal is not entirely clear. We kind of press a button and have to get the value of the model element by the parameter value. For me, it goes beyond imagination, as it can be done by throwing a bunch of markup in the controller view . In theory, the process should be some other. If he is as I described above, then it’s probably easier to show your own directive in toast.

Example

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.imtqy.com/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>

  • one
    The goal is to display a list of objects from the database, so that when you click on each, a modal window with the parameters of this object comes out. - Ivan Feofanov
  • @IvanFeofanov, perhaps, the second option will suit you, but you need to think about caching the already received data, if the number of called objects is large enough. - oshliaer
  • Thank you, your option is just what I needed. - Ivan Feofanov