Question

在使用angularjs创建指令时，尝试将draggable="true"放到标记上。 ng-repeat似乎不允许它渲染？

angular.module("dragApp", [])
.controller "DragCtrl", ($scope)->
  $scope.teamMembers =[
    {
    name: "Moe",
    pic: "https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10325183_10152504984116189_3762377112286239452_n.jpg?oh=64e01b1da81432362dcab98cecb0c01c&oe=54C902AC&__gda__=1421608147_ded25febd4716ec3b3d9593aacb505cb"
    }
    {
    name: "Jack",
    pic: "https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/1977155_10152328488946189_414460480_n.jpg?oh=f3f5772957ec826711f5e4de544b4920&oe=5483B18B&__gda__=1421730769_cde9a341e521dae06b84ce6f65f88803"
    }
    {
    name: "Joe",
    pic: "https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash2/t31.0-8/921299_10152077464151189_214902483_o.jpg"
    }
  ]

.directive "dragObject", ()->
  return {
    restrict: "E",
    scope: {
      member: "&"
    },
    link: (scope, element, attrs)->
      element.attr("draggable", "true")
      attrs.draggable = "true"

      element.bind "dragstart", (event)->
        if event.preventDefault() then event.preventDefault()

        event.dataTransfer.setData("teamMember", scope.member.name)

      console.log attrs
#       console.log element.attr("draggable")
#       attrs.$observe "draggable", (event, event2)->
#         console.log event






  }

.directive "dragTarget", ()->
  return {
    restrict: "EA",
    link: (scope, element, attrs) ->

      element.bind "dragenter", (event)->
        console.log event
        event.preventDefault()

      element.bind "drop", (event)->
        console.log event
        teamMember = event.dataTransfer.getData("teamMember")
        console.log teamMember
  }

HTML：

<body ng-app="dragApp">
  <div ng-controller="DragCtrl">
    <div ng-repeat="member in teamMembers">
      <drag-object member="member" >
        <button draggable="true">Drag me</button>
      {{member.name}}
      <img ng-src="{{member.pic}}" alt="" width="50px">
      </drag-object>
    </div>
       <button draggable="true">Drag me</button>
<!--     <drag-object member="teamMembers[0]">
      {{teamMembers[0].name}}
      <img ng-src="{{teamMembers[0].pic}}" alt="" width="50px">
      </drag-object>
     -->    
    <div drag-target class="big-box"></div>
  </div>

</body>

这是JSBIN：http://jsbin.com/kupasi/1/edit?html,js,output

Answer 1

代码似乎与ng-repeat inside指令一致。请检查HERE，这是您需要的吗

  <drag-object ng-repeat="member in teamMembers" member="member" >
  {{member.name}}
  <img ng-src="{{member.pic}}" alt="" width="50px" draggable="true">
  </drag-object>

带有ng-repeat的html5标签

1 个答案: