简体   繁体   English

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

[英]Angular Directive scope binding not working in ng-repeat

I've been working with Angular for a while. 我已经在Angular工作了一段时间。 However, today I found it quite weird that the attrs in my custom directive were not bound correctly. 但是,今天我发现自定义指令中的attrs没有正确绑定很奇怪。 Here is the excerpt of code: 这是代码摘录:

<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.
    }
  }
})

What's wrong with it? 它出什么问题了? Thanks in advance. 提前致谢。

Using isolated scope with = bindings will not resolve the attribute values using attrs . =绑定中使用孤立的作用域将不会使用attrs解析属性值。

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

You should use the scope instead: 您应该改为使用scope

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM