Databases
StackOverflow2013
Postsdbo
POScope issues with Angular UI modal
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POScope issues with Angular UI modal
    text
    copied!<p>I'm having trouble understanding/using the scopes for an angular UI modal. </p> <p>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.</p> <p>index.html (the important part of it)</p> <pre><code>&lt;div class="btn-group"&gt; &lt;button class="btn dropdown-toggle btn-mini" data-toggle="dropdown"&gt; Actions &lt;span class="caret"&gt;&lt;/span&gt; &lt;/button&gt; &lt;ul class="dropdown-menu pull-right text-left"&gt; &lt;li&gt;&lt;a ng-click="addSimpleGroup()"&gt;Add Simple&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a ng-click="open()"&gt;Add Custom&lt;/a&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a ng-click="doBulkDelete()"&gt;Remove Selected&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Controller.js (again, the important part)</p> <pre><code>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 }); }; }); </code></pre> <p>create.html (in its entirety)</p> <pre><code>&lt;div class="modal-header"&gt; &lt;button type="button" class="close" ng-click="cancel()"&gt;x&lt;/button&gt; &lt;h3 id="myModalLabel"&gt;Add Template Group&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;form&gt; &lt;fieldset&gt; &lt;label for="name"&gt;Group Name:&lt;/label&gt; &lt;input type="text" name="name" ng-model="name" /&gt; &lt;label for="groupType"&gt;Group Type:&lt;/label&gt; &lt;input type="text" name="groupType" ng-model="groupType" /&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn" ng-click="cancel()"&gt;Cancel&lt;/button&gt; &lt;button class="btn btn-primary" ng-click="ok()"&gt;Add&lt;/button&gt; &lt;/div&gt; </code></pre> <p>So, my question stands: why is the scope not being double-bound to the UI? and why does <code>this</code> have the customized values, but <code>$scope</code> does not?</p> <p>I have tried to add <code>ng-controller="AppCreateCtrl"</code> to the body div in create.html, but that threw an error: "Unknown provider: $modalInstanceProvider &lt;- $modalInstance" so no luck there.</p> <p>At this point, my only option is to pass back an object with <code>this.name</code> and <code>this.groupType</code> instead of using <code>$scope</code>, but that feels wrong.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload