Я новичок как в AngularJs, так и в ngDialog, и у меня возникают проблемы с подключением привязок между модемным модулем ngDialog и моим контроллером. Я ввел область управления в модальный, указав { scope: $scope }
, и у меня есть доступ к методам, определенным в контроллере, но привязки к моделям, определенным в контроллере, не работают должным образом.
Я пытаюсь использовать modal, чтобы пользователь мог добавить адрес в организацию.
Здесь main.js
var App = angular.module('App', ['ngRoute', 'ngCookies', 'ngDialog']);
...
App.controller('PageOrganization', function($scope, $rootScope, ngDialog, $route, $location){
$scope.addAddressFormData = {};
$scope.addAddress = function(){
ngDialog.open({
template: 'partials/modals/add-address.html',
controller: 'PageOrganization',
scope: $scope
});
};
$scope.saveAddress = function(){
console.log($scope.addAddressFormData);
$scope.organization.addresses.push($scope.addAddressFormData);
console.log($scope.organization);
};
// STUBBED OUT ORGANIZATION
$scope.organization = {
org_type: "nonprofit",
name: 'New Organization',
addresses: [],
phoneNumber: "",
faxNumber: "",
emailAddress: "",
website: "",
primaryContact: "",
primaryEmail: "",
imageUrl: "",
isPrivate: false,
campaigns: [],
admins: []
};
Здесь organization.html:
...
<button ng-click="addAddress()">Add an Address</button>
<h1>Addresses</h1>
<ul>
<li ng-repeat="address in organization.addresses">
<p>
{{address.type}} <br>
{{address.addressLine1}} <br>
{{address.addressLine2}} <br>
{{address.city}} <br>
{{address.state}} <br>
{{address.postalCode}}
</p>
</li>
</ul>
И здесь add-address.html:
<h1>Add an Address</h1>
<form ng-submit="saveAddress()">
<select name="type">
<option value="business" default="selected">Business</option>
<option value="residence">Residence</option>
</select>
<input ng-model="addAddressFormData.addressLine1" type="text" placeholder="Address Line 1">
<input ng-model="addAddressFormData.addressLine2" type="text" placeholder="Address Line 2">
<input ng-model="addAddressFormData.city" type="text" placeholder="City">
<select ng-model="addAddressFormData.state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<input ng-model="addAddressFormData.postalCode" type="text" placeholder="Postal Code">
<input type="submit" value="Save Address">
</form>
Модаль имеет доступ к родительской области; он успешно вызывает $scope.saveAddress()
и console.log($scope.organization)
записывает всю организацию, включая новый адрес, добавленный в модальный. Однако новый адрес не отображается в ng-repeat
в организации .html, и если я добавляю несколько адресов один за другим, в журнале отображается только последний.
В качестве эксперимента я добавил эту функцию в main.js:
$scope.pushAddress = function(){
$scope.addAddressFormData = {city: $scope.organization.addresses.length + 1};
console.log($scope.addAddressFormData);
$scope.organization.addresses.push($scope.addAddressFormData);
console.log($scope.organization);
};
и изменил кнопку "Добавить адрес" в файле organization.html для соответствия:
<button class="button color-c vertical-a float-right" ng-click="pushAddress()">Add an Address</button>
Теперь, когда я нажимаю "Добавить адрес", новый адрес сразу отображается в ng-repeat
, и каждый журнал консоли содержит все адреса, а не только самые последние.
Какая разница между этими двумя методами? Почему произошли изменения в модальном "истечении", когда они были сделаны с использованием методов в области контроллера?