Reputation: 1030
I'm new to angular. I wonder if this could be done. I have tow select elements. One for province and one for city. I want to update the city select element when province changes. I wrote tow directives that fetch data from server using angular services. But I have no idea how to say city that province has changed when user changes province. Actually I want to know if I can trigger an event on city directive when a change occurs on province directive. I googled this but could not find a solution. Any help is appreciated in advance. Here is my directives:
Province Directive
'use strict';
app.directive('province', function (Province, $rootScope) {
return {
restrict: 'E',
replace: true,
templateUrl: "/Templates/Directives/province.html",
link: function(scope, element, attr, controller) {
var elm = angular.element(element);
elm.attr('id', attr['id']);
elm.attr('name', attr['name']);
elm.attr('class', attr['class']);
elm.attr('ng-model', attr['ng-model']);
Province.get().then(function (provinces) {
scope.provinces = provinces;
});
}
};
})
City Directive
'use strict';
app.directive('city', function (City, $rootScope) {
return {
restrict: 'E',
replace: true,
templateUrl: '/Templates/Directives/city.html',
link: function (scope, element, attr, controller) {
var elm = angular.element(element);
elm.attr('id', attr['id']);
elm.attr('name', attr['name']);
elm.attr('class', attr['class']);
elm.attr('ng-model', attr['ng-model']);
City.getByProvince(8).then(function (cities) {
scope.cities = cities;
});
}
};
})
And here is my templates:
province.html
<select>
<option ng-repeat="province in provinces" value="{{province.provinceId}}"> {{province.provinceName}}</option>
</select>
city.html
<select>
<option ng-repeat="city in cities" value="{{city.cityId}}">{{city.cityName}} </option>
</select>
Upvotes: 0
Views: 2337
Reputation: 28750
First go read up on how to implement ng-options (http://docs.angularjs.org/api/ng/directive/select). Also add an ng-change onto your province select. Your code will change to this:
<select data-ng-model="selectedProvince" data-ng-options="province.provinceId as province.provinceName for province in provinces" data-ng-change="provinceChanged()"></select>
Then in your link function for your province directive fire off a provinceChanged event when the ng-change fires:
scope.selectedProvince = false;
scope.provinceChanged = function(){
if(!scope.selectedProvince){ return; }
$rootScope.$broadcast("provinceChanged", { province: scope.selectedProvince });
};
And in your city directive listen in for that event:
scope.$on("provinceChanged", function(event, data){
console.log(data.province); //selected province
});
Upvotes: 1