I feel like this may be a duplicate of Angularjs UI Modal Forms but I've looked at that for like an hour and I still can't get this to work.
I'm trying to have a modal pop up where you can set the name of something, add that name to an existing hash and then save that hash to an array, but for some reason I can't get the name to bind from the html back to the modal instance, so I'm always stuck with the initial name value.
Here's a plunker I made to demonstrate the problem: http://plnkr.co/edit/zk6eZo7Xq17tiiSOO2Cv?p=preview
Here's the code involved for your convenience if you'd rather not look at the plunker:
the html:
<!doctype html> <html ng-app="plunker"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js"> </script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div ng-controller="ModalCtrl" ng-init="roll={numSides: 6}"> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h3 class="modal-title">Save your custom roll!</h3> </div> <div class="modal-body"> Name: <input ng-model="name" /> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button> </div> </script> <button type="submit" class="btn btn-default" ng-click="save(roll)" >Save to Common Rolls</button> {{roll.name}} </div> </body> </html> the js:
angular.module('plunker', ['ui.bootstrap']); var ModalCtrl = function ($scope, $modal, $log) { $scope.name = "initial name"; $scope.save = function (customRoll) { var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: SaveRollCtrl, resolve: { customRoll: function () { customRoll.name = $scope.name; $log.info('customRoll.name: ' + customRoll.name); return customRoll; } } }); modalInstance.result.then(function(customRoll) { $log.info(customRoll); }, function () { $log.info('Modal dismissed at: ' + new Date()); }); }; }; // Please note that $modalInstance represents a modal window (instance) dependency. // It is not the same as the $modal service used above. var SaveRollCtrl = function ($scope, $modalInstance, $log, customRoll) { $log.info('customRoll.name: ' + customRoll.name); $scope.name = customRoll.name; $scope.ok = function () { $log.info('instance name: ' + $scope.name); customRoll.name = $scope.name; $modalInstance.close(customRoll); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; };
namestraight on$scopetry add an object on$scopethat has anameattribute....so$scope.user.nameand make all the relevant changes in the code. Check this out plnkr.co/edit/Gk89M8KBtn2bfwVuS1Tv?p=preview does that do what you expect?