将 http 请求中定义的范围变量从控制器传递到指令

Question

我正在尝试将控制器中的 get 请求中的经度和纬度传递给我的指令。但是，就目前的代码而言，在指令中调用时范围变量是“未定义的”。如果我 'console.log($scope.lat);'在我的控制器中，在获取请求之后它也是“未定义的”，所以似乎范围变量没有被传递到请求之外。有人知道为什么是这样吗？谢谢

angular.module('Ski').controller('MapCtrl', function($scope, $http) {
  'use strict';

  $http.get('https://quiet-journey-8066.herokuapp.com/mountains/5').success(function(response) {
      $scope.mountain = response.name;
      $scope.lat = response.latitude;
      $scope.lng = response.longitude;

    });

});



angular.module('Ski').directive('mapCanvas', function() {


  return {

    scope: {mapCanvas : '='},
    link: function(scope, element, attrs) {
      var myLatlng = new google.maps.LatLng(scope.$parend.lat, scope.$parent.lng);      
      var mapOptions = {
        center: myLatlng,
        zoom: 14
      };

      var map = new google.maps.Map(element[0], mapOptions);


    }
  };
});

Answer 1

角度方式：

我们想要做的是将指令内部的作用域与外部作用域分开，然后将外部作用域映射到指令的内部作用域。

看这个例子：

angular.module('Ski').directive('mapCanvas', function() {

  return {
    scope: {         
      lat: '=',
      lng: '='
    },
    link: function(scope, element, attrs) {
      var zoom = attrs.zoom || 14;

      var myLatlng = new google.maps.LatLng(scope.lat, scope.lng);

      var mapOptions = {
        center: myLatlng,
        zoom: zoom
      };

      var map = new google.maps.Map(element[0], mapOptions);
    }
  };
});

然后这样设置：

<div map-canvas lat="lat" lng="lng" zoom="14">
  <!-- your content, zoom is optional-->
</div>

其中lat 和lng 绑定到控制器$scope.lat 和$scope.lng

带有地图的可运行示例

经验

angular.module('ski',[])
    
    .controller('ctrl', function($scope) {      
         $scope.lat = 40.71427;
         $scope.lng =  -74.00597;      
         $scope.extra = "New York City";
      
     })
    
    .directive('map', function() {
      return {
        restrict: 'E',
        scope: {
          lat: '=',
          lng: '='
        },
        replace: true,
        template:'<div class="fullscreen"></div>',
        link: function(scope, element, attrs) {
          
          var zoom = parseInt(attrs.zoom) || 14;
          var myLatlng = new google.maps.LatLng(scope.lat, scope.lng);      
          var mapOptions = {
              center: myLatlng,
              zoom: zoom
          };

          var map = new google.maps.Map(element[0], mapOptions);
          
        }
      };
    });

html, body, .fullscreen {
  width: 100%;
  height: 100%;  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
<div ng-app="ski" ng-controller="ctrl" class="fullscreen">
<map lat="lat" lng="lng" zoom="12" ></map>
</div>

没有地图的可运行示例

概念。

angular.module('ski',[])
    
    .controller('ctrl', function($scope) {
      
         $scope.lat = -32.634;
         $scope.lng = -54.534;      
         $scope.extra = "Angular Way";
      
     })
    
    .directive('mapCanvas', function() {
      return {
        // creates new isolated scope.
        scope: {
          lat: '=',
          lng: '='
        },
        // here lat, lng, other & extra refers to directive isolated scope, not controller scope.
        template: '<p> Lat: {{lat}} Lng: {{lng}} Other: {{other}} Extra: {{extra}}</p>',
        link: function(scope, element, attrs) {
          // here scope means directive isolated scope.
          var zoom = attrs.zoom || 14;
          var extra = attrs.extra || "no extra";

          scope.other = zoom ;
          scope.extra = extra;
          
          console.log(scope.lat, scope.lng);
        }
      };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ski" ng-controller="ctrl">
<div map-canvas lat="lat" lng="lng" zoom="14" extra="{{extra}}">
  <!-- your content, zoom is optional-->
</div>
</div>