Javascript Can'；不能在模板和指令之间使用角度绑定

我试图将用户的当前坐标从我的控制器输入到我的模板中，并从那里输入到我的指令中。前半部分有效，但我无法让后半部分在我的生命中发挥作用。在指令中，我还尝试了“=”和lat=currentLat，以及scope/$scope。发生什么事了

控制器：

var posOptions = { timeout: 5000, enableHighAccuracy: true, maximumAge: 5000 };
$cordovaGeolocation.getCurrentPosition(posOptions)
    .then(function (location) {
        $scope.currentLat = location.coords.latitude;
        $scope.currentLong = location.coords.longitude;
        console.log($scope.currentLat, $scope.currentLong);
    });

angular.module('testApp.controllers', ['ionic', 'ngCordova.plugins.geolocation', 'ngCordova.plugins.backgroundGeolocation'])

.controller('MapCtrl', ['$scope', '$ionicPopup', '$cordovaGeolocation', '$cordovaBackgroundGeolocation', '$timeout', '$http', 
               function ($scope, $ionicPopup, $cordovaGeolocation, $cordovaBackgroundGeolocation, $timeout, $http) {
    $scope.loaded = false;

    var posOptions = { timeout: 5000, enableHighAccuracy: true, maximumAge: 5000 };
    $cordovaGeolocation.getCurrentPosition(posOptions)
        .then(function (location) {
            $scope.currentLat = location.coords.latitude;
            $scope.currentLong = location.coords.longitude;
            $scope.loaded = true;
        });
}])

模板：

<div id="map" zoom="16" bgeo lat="{{currentLat}}" lng="{{currentLong}}">

<ion-scroll zooming="true" direction="xy" style="width:90%">
   <div ng-if="loaded" bgeo lat="currentLat" lng="currentLong">
       <div id="map" style="width: 600px; height: 500px;"></div>
   </div>
</ion-scroll>

---

可以在此处找到测试应用程序的完整代码：

当您在模板中使用

@

时，它是一次性字符串绑定。由于您正在等待asynchronous

.getCurrentPosition

完成，因此在指令中链接这些值之前，不会更新这些值。链接函数仅在编译指令时调用

相反，您希望延迟指令的加载，直到加载范围值。如果，可以通过

ng将指令从DOM中删除，从而防止编译指令：

<div bgeo ng-if=loaded lat={{currentLat}} lng={{currentLng}}>



在
load
设置为true之前，不会编译或链接该指令，您可以在
.getCurrentPosition
回调中执行此操作：


您还可以在隔离作用域定义中将数据绑定与
=
一起使用。但是，请注意，该指令仅在最初编译后才链接，因此调用
console.log
会太早。如果您在模板或控制器中使用绑定值，那么这样做会更有意义，特别是如果您将更改它们并将其传播回父控制器

这就是最终起作用的原因：

模板：

<div id="map" zoom="16" bgeo lat="{{currentLat}}" lng="{{currentLong}}">

<ion-scroll zooming="true" direction="xy" style="width:90%">
   <div ng-if="loaded" bgeo lat="currentLat" lng="currentLong">
       <div id="map" style="width: 600px; height: 500px;"></div>
   </div>
</ion-scroll>

指令：

.directive('bgeo', ['$cordovaGeolocation', '$cordovaBackgroundGeolocation', '$http', function ($cordovaGeolocation, $cordovaBackgroundGeolocation, $http) {
return {
    scope: {
       lat: '@',
       lng: '@'
   },
    link: function (scope) {
        console.log("directive: ", scope.lat, scope.lng);
    }
}}])

.directive('bgeo', ['$cordovaGeolocation', '$cordovaBackgroundGeolocation', '$http', 
           function ($cordovaGeolocation, $cordovaBackgroundGeolocation, $http) {
    return {
        scope: {
           lat: '=',
           lng: '='
       },
        link: function (scope) {
            console.log("directive: ", scope.lat, scope.lng);
                myLatLng = new google.maps.LatLng(scope.lat, scope.lng);
                mapOptions = {
                    zoom: 16,
                    center: myLatLng
                };
                map = new google.maps.Map(document.getElementById('map'), mapOptions);
                marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    draggable: false,
                    icon: 'small-orange-pin.png'
                });
        }
    }
}])

我想我想做后者；我正在尝试将（谷歌）地图更新到用户的当前位置。但是，后一个示例使用“模板”而不是“链接”-您能否解释如何使用“链接”来代替？我不认为我可以像那样快速创建模板，因为我正在处理地图。不过，我肯定错了。@SahilTalwar
link
在编译指令后只运行一次。您可以使用
link
执行一些初始设置SAN数据绑定。无法单独延迟链接——您必须延迟指令的编译。了解你的最终目标是什么将有助于真正帮助你。使用地理位置获取用户坐标（这也是为背景地理位置设置初始值所需的坐标）2。创建一张以这些坐标为中心的地图，地图3上显示了用户的位置。使用“背景地理位置”将地图更新到用户所在的位置。这有意义吗？毕竟它起作用了！谢谢你的帮助，你让我走上了正轨。