I'm currently in the process of learning AngularJS and I'm attempting to create a reusable component.
However, I've encountered an issue where I can't populate the fields inside the element with data retrieved from JSON. After searching on various platforms, including SO and other websites, I still couldn't find a solution. Can anyone point out what I might be doing wrong?
I have two controllers set up: one retrieves a list of all countries:
app.controller('MainController', ['$scope', 'Countries',
function ($scope, Countries) {
$scope.countries = Countries.query();
}]);
The other controller collects specific address details:
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"};
}]);
The services are defined as follows, and they appear to be functioning correctly by providing valid JSON data:
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'}}
})
}])
I have set up routing to direct to the AddressesController:
app.config(function ($routeProvider) {
$routeProvider
.when('/address', {
templateUrl: 'partials/addresses.html',
controller: 'AddressesController'
})
.when('/address/:addressId', {
templateUrl: 'partials/addresses2.html',
controller: 'AddressesController'
})
});
In the partial view, I've created 2 elements:
<label> Sender </label>
<address address-data='{{senderAddress}}'></address>
<label> Receiver </label>
<address></address>
Now the directive is declared in this manner:
app.directive("address", function () {
return {
restrict: "E",
templateUrl: "/directives/address.html",
scope: {addrData: '@senderAddress'},
link: function(scope, element, attributes) {
scope.adData = attributes["addressData"];
}
}
});
The template for the directive is as follows:
<div>
<label> {{senderAddress}} </label>
<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" />
</div>
<div>
<label>Street {{dto.adData.street}}</label>
<input type="text" data-ng-model="dto.adData.street">
</div>
</div>
Everything seems to be working fine outside of the directive. However, I believe I may be missing something in terms of handling the scope within a directive when dealing with data fetched from a JSON service. Is it because the JSON data is a promise object when the links to the directive are being created? How should this be managed?
PS
I've also attempted observing the attributes:
link: function(scope, element, attributes) {
attrs.$observe('addressData', function(data) {
if (!data)
return;
scope.dto.adData = data;
})
}
Even for statically defined data, it doesn't seem to work as intended:
app.directive("address", function () {
return {
controller: function($scope) {
$scope.dto = {};
$scope.dto.data = {"id": 1, "country": "Poland", "city": "Warsaw", "street": "Nullowska 15"};
},