在AngularJS中，如何在ng-click中获取元素的宽度而不使用Jquery？

Question

我希望能够动态获取 div.progress-bar 的宽度，并从 ng-click 中获取。我的 move($event) 函数在元素 div.progress-bar 上返回带有元素 div.progress-bar 的事件。但是，当我点击 div.progress-bar 内部的 div.time 时，它会返回带有元素 div.time 的事件。

即使我点击他的子元素，我仍然只想要进度条的宽度。

HTML：

    <div class="progress-bar" ng-click="move($event)">
        <div class="time" ng-style="{'width': (current_track.time_current / current_track.time_total * 100) + '%'}"></div>
    </div>

控制器：

$scope.move = function(e) {
    console.log(e);
    console.log(e.srcElement.offsetWidth);
    var widthOfProgressBar = e.srcElement.offsetWidth;
    /* ... */
};

- Steffi

Answer 1

您需要检查所点击的元素是否为.progress-bar，如果不是，则获取其父元素：

var bar = e.srcElement.className === 'time'
    ? e.srcElement.parentNode
    : e.srcElement;

var widthOfProgressBar = bar.offsetWidth;
/* ... */

或者更加Angular/jqLite的方式：

var element = angular.element(e.srcElement),
    bar = (element.hasClass('time') ? element.parent() : element)[0];

var widthOfProgressBar = bar.offsetWidth;
/* ... */

- VisioN

---

很棒的答案@VisioN！我采用第一个解决方案;) - Steffi

Answer 2

$scope.move =  function(e){
    var width = angular.element(e.srcElement)[0].offsetWidth;

    console.log(e.offsetX ,"/", width);
}

- Eyad Farra