极客观点
项目管理
HarmonyOS
最近在做angular省市县联动的功能，使用了directive指令分别对省、市、县做了处理，但是反正在父模块中取不到directive里面的ng-model的值，代码如下：
directive部分：
angular.module('gwapp').directive('addressSelector', ['$http', '$filter', function($http, $filter) {
return {
scope: {},
controller: function($scope, $element, $attrs, $transclude) {
var addressArr = $scope.addressArr = [];
this.getScope = function() {
return $scope;
}
this.pushAddress = function(address) {
addressArr.push(address);
}
$scope.$on('childChange', function(ev, model, scope){
angular.forEach(addressArr, function(value, key){
value.$emit('changeModel', model, scope);
});
});
$http.get($attrs.data).success(function(res) {
$scope.$emit('childChange', res);
});
},
restrict: 'AE',
};
}]);
angular.module('gwapp').directive('province', ['$filter', function($filter) {
return {
scope: {
code: '@'
},
require: '^?addressSelector',
restrict: 'AE',
controller: function($scope, $element, $attrs, $transclude) {
$scope.name = 'province'
$scope.$on('changeModel', function(ev, res, scope){
if(scope === $scope)return;
var province = res && res.province;
if(province){
var code = $scope.code;
if(code && !$scope.model){
$scope.model = $filter('filter')(province, {code: code})[0];
}
else{
$scope.model = province[0]
}
$scope.province = province;
}
});
$scope.$watch('model', function(newValue, oldValue, scope) {
if(newValue){
$scope.change(newValue);
}
});
},
template: '<select ng-model="model" ng-options="p.name for p in province track by p.code"></select>',
replace: true,
link: function($scope, iElm, iAttrs, addressController) {
if (!addressController) return;
addressController.pushAddress($scope);
$scope.change = function(model){
addressController.getScope().$emit('childChange', model, $scope);
}
}
};
}]);
angular.module('gwapp').directive('city', ['$filter', function($filter) {
return {
scope: {
code: '@'
},
require: '^?addressSelector',
restrict: 'AE',
controller: function($scope, $element, $attrs, $transclude) {
$scope.name = 'city'
$scope.$on('changeModel', function(ev, res, scope){
if(scope === $scope)return;
var city = res && res.city;
if(city && city.length>0){
var code = $scope.code;
if(code && !$scope.model){
$scope.model = $filter('filter')(city, {code: code})[0];
}
else{
$scope.model = city[0]
}
}
$scope.city = city;
});
$scope.$watch('model', function(newValue, oldValue, scope) {
if(newValue){
$scope.change(newValue);
}
});
},
template: '<select ng-model="model" ng-show="city.length" ng-options="c.name for c in city track by c.code"></select>',
replace: true,
link: function($scope, iElm, iAttrs, addressController) {
if (!addressController) return;
addressController.pushAddress($scope);
$scope.change = function(model){
addressController.getScope().$emit('childChange', model, $scope);
}
}
};
}]);
angular.module('gwapp').directive('area', ['$filter', function($filter) {
return {
scope: {
code: '@'
},
require: '^?addressSelector',
controller: function($scope, $element, $attrs, $transclude) {
$scope.$on('changeModel', function(ev, res, scope){
if(scope === $scope)return;
var area = res && res.area;
if(area && area.length>0){
var code = $scope.code;
if(code && !$scope.model){
$scope.model = $filter('filter')(area, {code: code})[0];
}
else{
$scope.model = area[0]
}
}
$scope.area = area;
});
},
restrict: 'AE',
template: '<select\
ng-model="model"\
ng-show="area.length"\
ng-options="a.name for a in area track by a.code">\
</select>',
replace: true,
link: function($scope, iElm, iAttrs, addressController) {
if (!addressController) return;
addressController.pushAddress($scope);
$scope.change = function(model){
addressController.getScope().$emit('childChange', model);
}
}
};
}]);html部分：
<div address-selector data="/www/js/ggw/address.js" class="f-l" style=" width: 60%;">
<province name="province"></province>
<city name="city" ></city>
<area name="area"></area>
</div>页面效果如下：
json格式：
"province":[
{"id":1, "code":"110000", "name":"北京市", "city":[
{"id":2, "code":"110100", "name":"市辖区", "area":[
{"id":3, "code":"110101", "name":"东城区"},
{"id":4, "code":"110102", "name":"西城区"},
{"id":5, "code":"110103", "name":"崇文区"},
{"id":6, "code":"110104", "name":"宣武区"},
{"id":7, "code":"110105", "name":"朝阳区"},
{"id":8, "code":"110106", "name":"丰台区"},
{"id":9, "code":"110107", "name":"石景山区"},
{"id":10, "code":"110108", "name":"海淀区"},
{"id":11, "code":"110109", "name":"门头沟区"},
{"id":12, "code":"110111", "name":"房山区"},
{"id":13, "code":"110112", "name":"通州区"},
{"id":14, "code":"110113", "name":"顺义区"},
{"id":15, "code":"110114", "name":"昌平区"},
{"id":16, "code":"110115", "name":"大兴区"},
{"id":17, "code":"110116", "name":"怀柔区"},
{"id":18, "code":"110117", "name":"平谷区"}
]},
{"id":19, "code":"110200", "name":"县", "area":[
{"id":20, "code":"110228", "name":"密云县"},
{"id":21, "code":"110229", "name":"延庆县"}
]}
]},
{"id":22, "code":"120000", "name":"天津市", "city":[
{"id":23, "code":"120100", "name":"市辖区", "area":[
{"id":24, "code":"120101", "name":"和平区"},
{"id":25, "code":"120102", "name":"河东区"},
{"id":26, "code":"120103", "name":"河西区"},
{"id":27, "code":"120104", "name":"南开区"},
{"id":28, "code":"120105", "name":"河北区"},
{"id":29, "code":"120106", "name":"红桥区"},
{"id":30, "code":"120107", "name":"塘沽区"},
{"id":31, "code":"120108", "name":"汉沽区"},
{"id":32, "code":"120109", "name":"大港区"},
{"id":33, "code":"120110", "name":"东丽区"},
{"id":34, "code":"120111", "name":"西青区"},
{"id":35, "code":"120112", "name":"津南区"},
{"id":36, "code":"120113", "name":"北辰区"},
{"id":37, "code":"120114", "name":"武清区"},
{"id":38, "code":"120115", "name":"宝坻区"}
]},
{"id":39, "code":"120200", "name":"县", "area":[
{"id":40, "code":"120221", "name":"宁河县"},
{"id":41, "code":"120223", "name":"静海县"},
{"id":42, "code":"120225", "name":"蓟县"}
]}
]}
]请问哪位大神能解下惑，在外部怎么取到ng-model="model"的值？？因为要取到对应option的value值 ,估计是父子作用域的问题，但是不知从何修改，求大神解惑，跪谢 万分感谢！！
可以把代码放到runJs，plnkr，codepen，jsbin等上面，方便别人调试