通行證模型指令

我創建了一個map指令，包穀歌地圖API並創建帶有標記的地圖給予一定coordenates：通行證模型指令

<map latitude="-17.366449199999998" longitude="-66.1564083"></map>

我使用angularjs-geolocation獲取並承諾座標：

geolocation.getLocation().then(function(data) { 
    $scope.coords = _.pick(data.coords, 'latitude', 'longitude'); 
});

如何將$scope.coords的值傳遞給地圖的隔離範圍？

<map latitude="{{ coords.latitude }}" longitude="{{ coords.longitude }}"></map>

我已嘗試設置指令的範圍爲：

scope: { 
    coords: '&' 
}

並傳遞COORDS有：

<map coords="coords"></map>

我認爲，這將COORDS正在獲取異步與承諾的事實是因爲它在創建map指令期間不可用，所以會產生問題。

我會後我的指令代碼：

angular.module('angularGeolocationApp').directive('map', function($log) { 
    return { 
    template: '<div class="google-map"></div>', 
    restrict: 'E', 
    replace: true, 
    scope: { 
     latitude: '@', 
     longitude: '@' 
    }, 
    link: function postLink(scope, element, attrs) { 

     element.unwrap(); 

     var latlng = new google.maps.LatLng(scope.latitude, scope.longitude); 

     var map = new google.maps.Map(element.get(0), { 
     zoom: 15, 
     center: latlng,the 
     mapTypeControl: false, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.SMALL 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title: 'You are here!' 
     }); 
    } 
    }; 
});

來源

2013-11-22 jviotti

scope: { 
    coords: '=' 
} 

<map coords="coords"></map>

，並在您的鏈接功能

scope.$watch('coords', function (coords) { 
    console.log(coords); 
})

來源

2013-11-22 16:06:45 Oliver

可正常工作，但是，第一隻手錶返回'scope.coords === undefined'。我正在做'if（！scope.coords）return;'解決這個問題，但是有沒有更好的方法？ – jviotti

在您的控制器中定義'$ scope.coords'。 – Oliver

爲了通過一個JavaScript對象一樣coords，你將需要在您的隔離範圍內使用=：

scope: { 
    coords: '=' 
}

=會將整個對象綁定到指令中，其中@只會將扁平屬性值綁定到指令中。所以，=將通過引用傳遞。然後，您將可以訪問指令中的coords對象的所有屬性。

然後，當你使用coords，它應該是這樣的：

var latlng = new google.maps.LatLng(scope.coords.latitude, scope.coords.longitude);

來源

2013-11-22 16:06:08

'&' 用於父上下文評估屬性。使用'='代替隔離範圍與其父項之間的雙向綁定屬性。

scope : { 
coords : "=" 
}

應該這樣做。

來源

2013-11-22 16:06:13

通行證模型指令

回答

相關問題