Javascript angular.js嵌套指令范围属性
我想一个“地图”标签巫婆应该包含“标记”标签 我的问题是,我想使用“映射”父范围中的变量设置“标记”属性 如果我这样做:Javascript angular.js嵌套指令范围属性,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我想一个“地图”标签巫婆应该包含“标记”标签 我的问题是,我想使用“映射”父范围中的变量设置“标记”属性 如果我这样做: <map center="{{userPosition}}"> <marker lat="13.555232324" lng="43.555232324" text="Text1" on-click="callback('id_0')" ></marker> </map> 假设您使用
<map center="{{userPosition}}">
<marker lat="13.555232324" lng="43.555232324" text="Text1" on-click="callback('id_0')" ></marker>
</map>
假设您使用的是支持
controllerAs
的角度版本,则可以执行以下操作:
ngBMap.directive('marker',[function($compile){
返回{
限制:'E',
要求:“^map”,
controllerAs:'标记',
链接:函数(范围、元素、属性、映射控制器){
var lat=属性lat
要使其在Angular 1.0.x中工作,您需要使用
scope:true
创建一个子作用域,该子作用域继承自父指令,因此它们不会相互冲突。我已经测试过,但它不工作。我的Angular版本是1.0.7。然后它就不工作了。controllerAs在1.2.0(和预发布版本)中实现。谢谢,我已经更新了angular版本,并按照您的建议使用了“controllerAs:“marker”,您是否尝试过使用this.markers=$scope.markers=[];
?
<map center="{{userPosition}}">
<marker lat="{{nearRooms['id_0'].lat}}" lng="{{nearRooms['id_0'].lng}}" text="Text1" on-click="callback('id_0')" ></marker>
</map>
ngBMap.directive('map', [ function ($compile){
return {
restrict: 'E',
controller: ['$scope', function($scope) {
this.markers = [];
$scope.markers = [];
this.mapHtmlEl = null
this.map = null;
this.exeFunc = function(func, context, args){
$scope.$parent[func].apply(context, args)
}
this.initializeMarkers = function(){
for (var i=0; i<this.markers.length; i++) {
var marker = this.markers[i];
this.map.entities.push(marker);
}
}
this.initializeMap = function(scope, elem, attrs){
var map_canvas = document.createElement('div')
var _thisCtrl = this;
....
this.mapHtmlEl = map_canvas;
}
this.setCenter = function(position){
var position = eval(position)
var _position = new Microsoft.Maps.Location(position[0], position[1])
if(this.map)
this.map.setView({center : _position});
}
}],
scope: {
'center': '@',
},
link: function(scope, element, attrs, ctrl) {
scope.$watch('center', function(center) {
console.log('center: '+center)
if(center){
ctrl.setCenter(center)
}
}, false);
ctrl.initializeMap(scope, element, attrs)
element.html(ctrl.mapHtmlEl)
}
}
ngBMap.directive('marker', [ function ($compile){
return {
restrict: 'E',
require: '^map',
link: function(scope, element, attrs, mapController) {
console.log('marker init')
var getMarker = function() {
var lat = attrs.lat
.....
var marker = _marker;
return marker;
}//end getMarker
var marker = getMarker();
mapController.markers.push(marker);
}
}}]);