在指令

Question

我有一个显示谷歌地图的指令。我正在传递来自根镜的经度值和经度值。地图正在第一次正确加载，但是如果我通过rootscope更改了刻度和经度值，它就不会加载并显示空白地图。它也不会抛出任何错误。

我的地图指令

<map class="card map"  ng-hide="{{$scope.hideMap=false;}}"  on-create="mapCreated(map)"></map>

我的指令代码：

angular.module（＆＃39; starter.directives＆＃39;，[]）

.directive('map', function($rootScope) {
  return {
    restrict: 'E',
    scope: {
      onCreate: '&',

    },
    link: function ($scope, $element, $attr) {
      function initialize() {

           //Need to pass value from rootscope

        myLatlng = new google.maps.LatLng($rootScope.prodPositions.latitude, $rootScope.prodPositions.longitude);



        var mapOptions = {
          center:   myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map($element[0], mapOptions);

   var marker = new google.maps.Marker({
          position:  myLatlng,
          map: map,
          title: 'Pizz Hut'
        });
        $scope.onCreate({map: map});

        // Stop the side bar from dragging when mousedown/tapdown on the map
        google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
          e.preventDefault();
          return false;
        });
      }

      if (document.readyState === "complete") {
        initialize();
          console.log("test lat2"+$rootScope.prodPositions.latitude, $rootScope.prodPositions.longitude);
      } else {
        google.maps.event.addDomListener(window, 'load', initialize);
          console.log("test lat3"+$rootScope.prodPositions.latitude, $rootScope.prodPositions.longitude);
      }
    }
  }
});

Answer 1

我认为你需要注意$rootScope.prodPositions变量的变化，然后你需要重新编译你的指令。

要重新编译您的指令，您需要在链接函数中添加它：

$compile($element.contents())($scope);

并添加$compile服务作为DI。

Angular $compile