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;
    }

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

1 个答案: