I'm having trouble understanding/using the scopes for an angular UI modal. I've searched high and low, and read the docs over and over. Now, I'm turning to the community.
I'm hoping that I'm just overlooking something simple. I'm fairly new to Angular but am very familiar with Javascript.
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">
Actions
<span class="caret"></span>
</button>
<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>
</ul>
</div>
Controller.js (again, the important part)
MyApp.controller('AppListCtrl', function($scope, $modal){
$scope.name = 'New Name';
$scope.groupType = 'New Type';
$scope.open = function(){
var modalInstance = $modal.open({
templateUrl: 'partials/create.html',
controller: 'AppCreateCtrl'
});
modalInstance.result.then(function(response){
// 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', $scope.name);
});
};
});
MyApp.controller('AppCreateCtrl', function($scope, $modalInstance){
$scope.name = 'Custom Name';
$scope.groupType = 'Custom Type';
$scope.ok = function(){
// outputs 'Custom Name' despite user entering "TEST 1"
console.log('create name', $scope.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?
$modalInstance.close({
name: $scope.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>
<div class="modal-body">
<form>
<fieldset>
<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" />
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" ng-click="ok()">Add</button>
</div>
So, my question stands: why is the scope not being double-bound to the UI? and why does 'this' have the customized values, but $scope does not?
I have tried to add ng-controller="AppCreateCtrl" 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 this.name and this.groupType instead of using $scope; but that feels wrong.
Thanks in advance! :)
UPDATE: 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.