Angular Directive范围绑定在ng-repeat中不起作用

Question

我已经在Angular工作了一段时间。 但是，今天我发现自定义指令中的attrs没有正确绑定很奇怪。 这是代码摘录：

<div ng-repeat="item in items">
  <io-map geo-location-x="item.data.x" geo-location-y="item.data.y" zoom-level="item.data.zoom"></io-map>
</div>

angular.directive('io-map', function() {
  return {
    restrict: 'EA',
    scope: {
      geoLocationX:'=',
      geoLocationY:'=',
      zoomLevel:'='
    },
    template: '<div id="map-' + Math.round(Math.random()*100000000) + '" style="height:400px"></div>',
    link: function (scope, element, attrs) {
      //Some logic...
      //I checked the attrs here, and found attrs.geoLocationX and so on are just plain strings like "item.data.x", meaning they are not bound, while I can assure you that item.data.x has its value.
    }
  }
})

它出什么问题了？ 提前致谢。

Answer 1

在=绑定中使用孤立的作用域将不会使用attrs解析属性值。

scope: {
  geoLocationX:'=',
  geoLocationY:'=',
  zoomLevel:'='
},

您应该改为使用scope ：

link: function (scope, element, attrs) {
      //Some logic...
      //use
      var valueForGeoLocationX = scope.geoLocationX;
    }