fractalspawn fractalspawn - 4 months ago 14
AngularJS Question

Scope issues with Angular UI modal

I'm having trouble understanding/using the scopes for an angular UI modal.

While not immediately apparent here, I have the modules and everything set up correctly (as far as I can tell), but these code samples in particular are where I'm finding the bug.

index.html (the important part of it)

<div class="btn-group">
<button class="btn dropdown-toggle btn-mini" data-toggle="dropdown">
<span class="caret"></span>
<ul class="dropdown-menu pull-right text-left">
<li><a ng-click="addSimpleGroup()">Add Simple</a></li>
<li><a ng-click="open()">Add Custom</a></li>
<li class="divider"></li>
<li><a ng-click="doBulkDelete()">Remove Selected</a></li>

Controller.js (again, the important part)

MyApp.controller('AppListCtrl', function($scope, $modal){
$ = 'New Name';
$scope.groupType = 'New Type';

$ = function(){
var modalInstance = ${
templateUrl: 'partials/create.html',
controller: 'AppCreateCtrl'

// outputs an object {name: 'Custom Name', groupType: 'Custom Type'}
// despite the user entering customized values
console.log('response', response);

// outputs "New Name", which is fine, makes sense to me.
console.log('name', $;


MyApp.controller('AppCreateCtrl', function($scope, $modalInstance){
$ = 'Custom Name';
$scope.groupType = 'Custom Type';

$scope.ok = function(){

// outputs 'Custom Name' despite user entering "TEST 1"
console.log('create name', $;

// outputs 'Custom Type' despite user entering "TEST 2"
console.log('create type', $scope.groupType);

// outputs the $scope for AppCreateCtrl but name and groupType
// still show as "Custom Name" and "Custom Type"
// $scope.$id is "007"
console.log('scope', $scope);

// outputs what looks like the scope, but in this object the
// values for name and groupType are "TEST 1" and "TEST 2" as expected.
// this.$id is set to "009" so this != $scope
console.log('this', this);

// based on what modalInstance.result.then() is saying,
// the values that are in this object are the original $scope ones
// not the ones the user has just entered in the UI. no data binding?
name: $,
groupType: $scope.groupType

create.html (in its entirety)

<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">x</button>
<h3 id="myModalLabel">Add Template Group</h3>
<div class="modal-body">
<label for="name">Group Name:</label>
<input type="text" name="name" ng-model="name" />
<label for="groupType">Group Type:</label>
<input type="text" name="groupType" ng-model="groupType" />
<div class="modal-footer">
<button class="btn" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" ng-click="ok()">Add</button>

So, my question stands: why is the scope not being double-bound to the UI? and why does
have the customized values, but
does not?

I have tried to add
to the body div in create.html, but that threw an error: "Unknown provider: $modalInstanceProvider <- $modalInstance" so no luck there.

At this point, my only option is to pass back an object with
instead of using
, but that feels wrong.

Thanks in advance! :)

In addition to the reading suggested by Nikos, there is also this list of pitfalls that can help. This problem is an example of pitfall #5.


I got mine to work like this:

var modalInstance = ${
  templateUrl: 'partials/create.html',
  controller: 'AppCreateCtrl',
  scope: $scope // <-- I added this

No form name, no $parent. I'm using AngularUI Bootstrap version 0.12.1.

I was tipped off to this solution by this.