Как передать данные JSON в директиву AngularJS
Я изучаю AngularJS. Я пытаюсь создать многоразовый компонент под названием .
К сожалению, я не могу предварительно заполнить поля внутри элемента данными, полученными из JSON.
Я оглядел так и паутину, но так и не смог ее разгадать. Не могли бы вы дать мне знать, что я делаю не так?
У меня есть два контроллера. Вы получаете Список всех стран:
app.controller('MainController', ['$scope', 'Countries',
function ($scope, Countries) {
$scope.countries = Countries.query();
}]);
Другой собирает конкретный адрес:
app.controller('AddressesController', ['$scope', '$routeParams', 'Address',
function($scope, $routeParams, Address) {
if ($routeParams.addressId) {
$scope.senderAddress = Address.get({addressId: $routeParams.addressId});
} else {
$scope.senderAddress = {"id":null, "country":null, "city":null, "street":null};
}
$scope.adData = {"id": 1, "country": "Poland", "city": "Warsaw", "street": "Nullowska 15"};
}]);
Услуги определяются следующим образом, они, кажется, работают правильно и обеспечить правильные JSONs:
myServices.factory('Countries', ['$resource',
function($resource) {
return $resource('data/countries.json', {}, {
query: {method:'GET'}
})
}]);
myServices.factory('Address', ['$resource',
function($resource) {
return $resource('data/:addressId.json', {}, {
query: {method:'GET', params:{addressId:'addressId'}}
})
}])
У меня есть набор маршрутизации, так что он направляет к AddressesController:
app.config(function ($routeProvider) {
$routeProvider
.when('/address', {
templateUrl: 'partials/addresses.html',
controller: 'AddressesController'
})
.when('/address/:addressId', {
templateUrl: 'partials/addresses2.html',
controller: 'AddressesController'
})
});
Частичный вид прост, я создаю 2 элемента
<label> Sender </label>
<address address-data='{{senderAddress}}'></address> <!-- I tried all combinations of passing this as argument -->
<label> Receiver </label>
<address></address>
Теперь директива объявляется как:
app.directive("address", function () {
return {
restrict: "E",
templateUrl: "/directives/address.html",
scope: {addrData: '@senderAddress'},
link: function(scope, element, attributes) {
scope.adData = attributes["addressData"];
}
}
});
И шаблон для него:
<div>
<label> {{senderAddress}} </label> <!-- senderAddress from Addresses Controller is filled correctly -->
<div>
<label>Country</label>
<select>
<option value=""></option>
<option ng-repeat="country in countries.countries" value="{{country}}">{{country}}</option>
</select>
</div>
<div>
<label>City {{dto.adData.city}}</label>
<input type="text" data-ng-model="dto.adData.city" /> <!-- this I cannot pre-fill -->
</div>
<div>
<label>Street{{data.adData.city}}</label>
<input type="text" data-ng-model="dto.adData.street"> <!-- this I cannot pre-fill -->
</div>
</div>
Все это хорошо работает вне директив. Но я упускаю кое-что относительно того, как обрабатывать область внутри директивы с данными, полученными из службы JSON. Это потому, что данные JSON-это обещание объект, когда создаются ссылки на директиву? Как с этим справиться?
PS
Я также попытался наблюдать атрибуты:
link: function(scope, element, attributes) {
//scope.dto.adData = attributes["addressData"];
attrs.$observe('addressData', function(data) {
if (!data)
return;
scope.dto.adData = data;
})
}
Даже для статически определенных данных это не работает:
app.directive("address", function () {
return {
controller: function($scope) {
$scope.dto = {};
$scope.dto.data = {"id": 1, "country": "Poland", "city": "Warsaw", "street": "Nullowska 15"};
},
2 ответов:
Передача в JSON, как это не так, как я бы это сделал, поскольку это своего рода взлом в привязке данных, и вы, вероятно, не получите двустороннюю привязку. Я бы использовал областьisolate .
Ваша директива будет использоваться без руля, чтобы связать переменную scope:
<address address-data='senderAddress'></address>И затем вы бы включили опцию
scopeв определение директивы:app.directive("address", function () { return { restrict: "E", templateUrl: "/directives/address.html", scope: { addressData: '=' } } });Голый знак равенства
'='сообщает Angular о двойной привязке родительской переменной scope, на которую ссылается атрибут address-data к дочерней переменной области видимости addressData. Это делается автоматически путем нормализации имени " address-data "в JS-стиль "addressData"."Если бы вы хотели назвать две переменные области по-разному, вы могли бы сделатьinnerAddressData: '=addressData'вместо этого.Если вы делаете это таким образом, вам вообще не нужна функция связывания, и привязка все равно должна работать.
Хорошо, я решил его, в случае, если у кого-то есть подобные проблемы, это может помочь проверить, если область установлена в true и проверить, если JSON анализируется из строки; -).
app.directive("address", function () { return { restrict: "E", templateUrl: "/directives/address.html", scope: true, // creates its own local scope link: function(scope, element, attributes) { attributes.$observe('addressData', function(data) { if (!data) return; scope.dto = {}; // works almost fine but in 2nd case data is also filled scope.dto.adData = angular.fromJson(data); }) } } });
Comments