Question

我正在使用Angular在谷歌地图上工作，我在地图上用$http调用创建了一些标记。当用户点击特定标记时，我会显示有关该位置的一些详细信息。我通过以下方式实现了这一目标。

控制器

app.controller('someController', [...some services , function(...){
    //Handling Click on the Map Marker and Drawing Them
    var drawMarkers = function(){
       angular.forEach($scope.items, function(val, key){
            $scope.markers[key] = new google.maps.Marker({
                position: {lat: val.lat_lng[0], lng: val.lat_lng[1]},
                map: $scope.map,
            }).addListener('click', function(){ 
                $scope.showDetails(val);
            });
        });  
    }

    //Function to show the Details
    $scope.showRestaurantDetails = function(item){
        $scope.itemInOverlay = item;        
        $scope.$apply();
    }
}]);

HTML（查看）

<div class="item-details">
     ....

     <item-offers offer-count="2" item-id="{{itemInOverlay.item_id}}" item-handle="{{item.item_handle}}">
    </item-offers>

     ....
</div>

指令

return {
    restrict: 'E',
    scope: {
        itemId: '@'
    },
    link: function(scope, el, attrs){
        scope.$watch(scope.itemId, function(){
            console.log('changed');
        });

        scope.getTemplateUrl = function(el, attrs){
            if(attrs.offerCount <= 2 && !utilityServices.isMobile())
                var url = '/restaurant/'+attrs.itemHandle+'/'+attrs.itemId+'/partials/offer/single';
            else
                var url = '/restaurant/'+attrs.itemHandle+'/'+attrs.itemId+'/partials/offer/multiple';

            return url;
        };
    },
    templateUrl: getTemplateUrl()
};

现在问题是，每当用户点击标记时，item-handle和item-id都会发生变化。我想加载有关此更改的不同信息的部分内容。

非常感谢任何帮助。

AngularJS：在点击时更改TemplateUrl for Directive

0 个答案: