Question

我写了以下指令：

WeatherApp.directive('map', function () {

    return{
        restrict : 'A',
        link: function(scope, elem, attr) {
            var latitude = scope.lat;
            var longitude = scope.lon;
         var  mapOptions = {
             zoom: 8,
             center: new google.maps.LatLng(latitude, longitude)
         };

         console.log("latitude ="+latitude);
         console.log("longitude ="+longitude);
         map = new google.maps.Map(elem[0], mapOptions);
        }
    }

});

我在html中使用此指令如下：

<div class="google-map" map=""></div>

有一个控制器HomeCtrl，它是该指令的父级。 HomeCtrl使用WetherService来获取lat，lon并将其设置为范围变量，但在指令中，纬度和经度的值是未定义的。我认为这是因为指令在控制器执行并获取天气数据之前被编译。如何在指令中设置范围数据？感谢。

Answer 1

您必须更改指令：

<div class="google-map" map lat="lat" lon="lon"></div>

指令声明应包含scope;

WeatherApp.directive（'map'，function（）{

return{
    scope: {
        lat: '@', // or '='
        lon: '@', // or '='
    },
    restrict : 'A',
    link: function(scope, elem, attr) {
        var latitude = scope.lat;
        var longitude = scope.lon;
     var  mapOptions = {
         zoom: 8,
         center: new google.maps.LatLng(latitude, longitude)
     };

     console.log("latitude ="+latitude);
     console.log("longitude ="+longitude);
     map = new google.maps.Map(elem[0], mapOptions);
    }
}

});

Answer 2

您可以做的是在lat和long值上创建一个监视，并仅在分配了地图时创建地图。

在您的范围内创建一个对象位置，该位置将被赋予从服务返回的值。 $watch用于指令代码中的此变量更改。

 link: function(scope, elem, attr) {
         scope.$watch("location", function(newValue,oldValue) {   
            if(newValue) {
              var  mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(newValue.lat, newValue.long)
              };
              map = new google.maps.Map(elem[0], mapOptions);
            }
        }
  }

需要将从服务返回的数据分配给范围变量location。您将此示例扩展为使用隔离范围，但您仍需要进行监视。

Answer 3

我要做的是将天气数据检索移至服务中。在您的指令中注入服务，并在回调中或在数据承诺完成后设置lat和lon范围变量（取决于您实现数据检索的方式）。

Answer 4

您可以将lat和lon放在$watch上。

指令范围变量未定义

4 个答案: