Question

我试图在发布时获取拖动列表项的位置和偏移量。

然而，$ ionicPosition.offset和$ ionicPosition.position都返回＆＃34; TypeError：无法读取属性＆＃39; getBoundingClientRect＆＃39;未定义的。

我已经包含了一个基本的代码段。提前致谢！

＆＃13;

var data = {
  "week": [{
    "name": "Monday",
    "activities": [{
      "name": "Go running",
      "shortname": "go_running"
    }, {
      "name": "Wash clothes",
      "shortname": "wash_clothes"
    }]
  }, {
    "name": "Tuesday",
    "activities": [{
      "name": "Holiday shopping",
      "shortname": "holiday_shopping"
    }, {
      "name": "Clean bike",
      "shortname": "clean_bike"
    }]
  }]
}

var app = angular.module('activityplan', ['ionic']);

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});

app.controller('PlanController', ['$scope','$ionicPosition', function($scope,$ionicPosition) {

  $scope.days = data.week;
  $scope.releaseTest = function(a) {
    console.log($ionicPosition.offset(a));
    console.log($ionicPosition.position(a));
  }
  
  $scope.moveActivity = function(activity, day, fromIndex, toIndex) {

     day.activities.splice(fromIndex, 1);
    day.activities.splice(toIndex, 0, activity);
    

  };

}]);

＆＃13;

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Activity plan</title> 

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-app="activityplan">

  <ion-content ng-controller="PlanController" style="width:360px;"> 
     
      <div ng-repeat="day in days">

        <div class="item item-divider item-dark">
          <b>{{ day.name }}</b>
        </div>

        <ion-list ng-controller="PlanController" show-reorder="true" can-swipe="true">
          <ion-item class="item-icon-right" ng-repeat="activity in day.activities track by $index" on-release="releaseTest(activity)">
            {{ activity.name }}
            <ion-option-button class="button-assertive icon ion-trash-a" ng-click=""></ion-option-button>
            <ion-reorder-button class="ion-navicon" on-reorder="moveActivity(activity,day,$fromIndex,$toIndex)"></ion-reorder>
          </ion-item>
        </ion-list>

      </div>

    </ion-content>



</body>

</html>

＆＃13;

Answer 1

你做错了。 $ionicPosition的方法offset(element)和position(element)期望DOM元素参数的一部分。

在你的情况下，你正在从标记中传递JavaScript对象，这就是它失败的原因。

位置（元素）：获取元素的当前坐标，相对于偏移父项。 jQuery的位置函数的只读等价物。

事实上，它在离子文档中的记录非常糟糕。

我在挖掘源代码后发现，这些方法是jQuery等效的，jQuery总是将匹配的元素包装在数组中，因此参数应该是数组，第0个索引指向实际的dom，如图所示以下

＆＃13;

var element = document.getElementById(id);
var offset = $ionicPosition.offset([element]); 
/*it returns the offset of param[0] 
where param is the parameter passed to this function
*/

/*note that we need to wrap the dom element inside array as these methods are inspired from jQuery 
and jQuery wraps the matched element inside array 
  
If you are using AngularJS's jqLite, please verify if actual DOM is in array 0th position or not

*/

＆＃13;

$ ionicPosition.offset和$ ionicPosition.position导致＆＃34; TypeError：无法读取属性＆＃39; getBoundingClientRect＆＃39;未定义＆＃34;

1 个答案: