本文介绍了如何使用NG重复使用图像映射区域的标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想使用AngularJS创建可点击车的空间,一旦我感动区域标记属性auto_parts JSON和在NG-重复适当的属性然后它不工作束缚。如何解决呢?

请上测试整版preVIEW元素。

\r
\r

VAR应用= angular.module('应用',[]);\r
\r
app.controller('imgMapCtrl',函数($范围,$ HTTP){\r
  $ scope.auto_parts = [{\r
    形:圈子,\r
    类型:kolo_przod,\r
    COORDS:193,342,68\r
  },{\r
    形:圈子,\r
    类型:kolo_tyl,\r
    COORDS:743,341,68\r
  },{\r
    形:聚,\r
    类型:okno,\r
    COORDS:380,220,494,213,512,149,452,157,421,165,369,192,384,199\r
  },{\r
    形:聚,\r
    类型:okno,\r
    COORDS:536,211,692,202,700,173,664,162,599,152,544,149\r
  },{\r
    形:聚,\r
    类型:drzwi,\r
    COORDS:301,355,510,354,504,334,510,236,516,213,528,144,462,149,419,162,361,190,300,231,293,253,292,312\r
  },{\r
    形:聚,\r
    类型:drzwi,\r
    COORDS:510,352,632,349,702,252,712,211,708,202,716,176,657,156,586,145,528,145,516,213,510,235,504,333\r
  }]\r
\r
\r
  $ scope.partClicked =功能(ARG){\r
    警报(ARG +点击);\r
  }\r
});

\r

&LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
&LT; D​​IV NG-应用=应用程序&GT;\r
  &LT; D​​IV NG控制器=imgMapCtrl&GT;\r
    &所述; IMG类=rwdimgmapSRC =htt​​p://www.mazda.pl/assets/master/cars/all-new-mazda6-sedan/general/12/m6-sedan-red-side.png中高音=自动WIDTH =960HEIGHT =540BORDER =0USEMAP =#汽车/&GT;\r
    &LT;地图名称=自动ID =自动&GT;\r
      &LT;区域NG重复=部分auto_parts形=part.shapeCOORDS =part.coordsNG点击=partClicked('{{part.type}}')称号=part.type /&GT;\r
    &LT; /图&GT;\r
  &LT; / DIV&GT;\r
&LT; / DIV&GT;

\r

\r
\r

这是工作仅HTML片段:

 &LT;地图名称=自动ID =自动&GT;
    &LT;区域形状=圈子COORDS =193,342,68NG点击=partClicked('kolo_przod')/&GT;
    &LT;区域形状=圈子COORDS =743,341,68NG点击=partClicked('kolo_tyl')/&GT;
    &LT;区域形状=聚COORDS =380,220,494,213,512,149,452,157,421,165,369,192,384,199NG点击=partClicked('okno_przod')/&GT;
  &LT;区域形状=聚COORDS =536,211,692,202,700,173,664,162,599,152,544,149NG点击=partClicked('okno_tyl')/&GT;
    &LT;区域形状=聚 coords=\"301,355,510,354,504,334,510,236,516,213,528,144,462,149,419,162,361,190,300,231,293,253,292,312\" NG-点击=partClicked('drzwi_przod')/&GT;
    &LT;区域形状=聚 coords=\"510,352,632,349,702,252,712,211,708,202,716,176,657,156,586,145,528,145,516,213,510,235,504,333\" NG-点击=partClicked('drzwi_tyl')/&GT;
&LT; /图&GT;


解决方案

ngRepeat 部分有一个问题,它应该是:

 &LT;区域NG重复=部分auto_parts形={{part.shape}}COORDS ={{part.coords}}NG点击= partClicked(part.type)称号={{part.type}}/&GT;

请注意,它的形状={{part.shape}}用花括号。否则 part.shape 是PTED字面上的字符串,而不是插间$ P $。同样的, COORDS 标题属性。

在另一方面,你不需要在ngClick插标签,因为它接受一个前pression角就明白了: NG-点击=partClicked(part.type)

演示:

I'm trying to create clickable car profile using AngularJS, once I've moved area tag attributes to auto_parts json and bind them with appropriate attributes in ng-repeat then it isn't working. How to fix it?

Please test elements on full page preview.

var app = angular.module('app', []);

app.controller('imgMapCtrl', function($scope, $http) {
  $scope.auto_parts = [{
    "shape": "circle",
    "type": "kolo_przod",
    "coords": "193,342,68"
  }, {
    "shape": "circle",
    "type": "kolo_tyl",
    "coords": "743,341,68"
  }, {
    "shape": "poly",
    "type": "okno",
    "coords": "380,220,494,213,512,149,452,157,421,165,369,192,384,199"
  }, {
    "shape": "poly",
    "type": "okno",
    "coords": "536,211,692,202,700,173,664,162,599,152,544,149"
  }, {
    "shape": "poly",
    "type": "drzwi",
    "coords": "301,355,510,354,504,334,510,236,516,213,528,144,462,149,419,162,361,190,300,231,293,253,292,312"
  }, {
    "shape": "poly",
    "type": "drzwi",
    "coords": "510,352,632,349,702,252,712,211,708,202,716,176,657,156,586,145,528,145,516,213,510,235,504,333"
  }]


  $scope.partClicked = function(arg) {
    alert(arg + ' clicked');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="imgMapCtrl">
    <img class="rwdimgmap" src="http://www.mazda.pl/assets/master/cars/all-new-mazda6-sedan/general/12/m6-sedan-red-side.png" alt="auto" width="960" height="540" border="0" usemap="#auto" />
    <map name="auto" id="auto">
      <area ng-repeat="part in auto_parts" shape="part.shape" coords="part.coords" ng-click="partClicked('{{part.type}}')" title="part.type" />
    </map>
  </div>
</div>

This is working only HTML snippet:

<map name="auto" id="auto">
    <area shape="circle" coords="193,342,68" ng-click="partClicked('kolo_przod')" />
    <area shape="circle" coords="743,341,68" ng-click="partClicked('kolo_tyl')" />
    <area shape="poly" coords="380,220,494,213,512,149,452,157,421,165,369,192,384,199" ng-click="partClicked('okno_przod')" />
  <area shape="poly" coords="536,211,692,202,700,173,664,162,599,152,544,149" ng-click="partClicked('okno_tyl')" />
    <area shape="poly" coords="301,355,510,354,504,334,510,236,516,213,528,144,462,149,419,162,361,190,300,231,293,253,292,312" ng-click="partClicked('drzwi_przod')" />
    <area shape="poly" coords="510,352,632,349,702,252,712,211,708,202,716,176,657,156,586,145,528,145,516,213,510,235,504,333" ng-click="partClicked('drzwi_tyl')" />
</map>
解决方案

ngRepeat part has a problem, it should be:

<area ng-repeat="part in auto_parts" shape="{{part.shape}}" coords="{{part.coords}}" ng-click="partClicked(part.type)" title="{{part.type}}" />

Note, that it's shape="{{part.shape}}" with curly braces. Otherwise part.shape is interpreted as literally a string and not interpolated. Same with coords and title attributes.

On the other hand, you don't need interpolation tags in ngClick, as it accepts an expression Angular will understand: ng-click="partClicked(part.type)".

Demo: http://plnkr.co/edit/5bfNEQxqPfzZxuBJOSWm?p=preview

这篇关于如何使用NG重复使用图像映射区域的标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-17 18:35