Question

我在我的一个模板中有这个元素：

<ul>
    <li ng-repeat="register in results.registers track by register.id"></li>
</ul>

我需要获取ng-repeat的最后一个元素的宽度 - 不使用指令 - 所以我可以在控制器上使用它来处理另一个需要匹配宽度的元素。为此，我想触发一个事件并从它的事件目标属性中获取宽度，但不知道如何执行此操作。有什么想法吗？

**编辑**

为了简单起见，我没有说明任何指示，但认真地说它是一个指令 - 虽然没有分开的范围。与父范围，方法和集合的关系太多。我可以去继承范围，但这可能是几百个项目，所以重复父范围~500时间听起来不是一个好主意。

我道歉，似乎我沟通不好：/

Answer 1

现在我根据修改后的问题更改了答案，下面的代码片段可以帮到你。如果你想尽量减少沉重的观察者受到角度的侵扰，你可能更愿意使用这个模块https://github.com/Pasvaz/bindonce

我创建了另一个plunker，如果你可以使用jQuery并想跟踪widows上的元素宽度调整大小

＆＃13;

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {

  $scope.items = ['A', 'B', 'C'];
  $scope.getWidth = function (ele){
    var width = getComputedStyle(document.getElementById(ele)).width;
    console.log(width);
    return width;
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
    .bold {
      font-weight: bold;
    }
  </style>


<div ng-app="myApp" ng-controller="MainCtrl">
  <ul>
   <li ng-repeat="n in items track by $index" id="item-{{$index}}">
      {{n}}
      <span ng-if="$last" >
           {{getWidth('item-'+ $index)}}
       </span>
    </li>
  </ul>
</div>

＆＃13;

我希望这会对你有所帮助。

Answer 2

我不完全确定我是否理解你，但如果我是，那么你可以使用指令来实现这一目标。我知道你说你想在没有指令的情况下这样做，所以我还提供了一个jQuery / Angular组合来展示如何实现它，但它不是很漂亮。指令是执行此操作的正确方法，它更清晰。

jQuery / Angular方式：

  <script>
    var validation = angular.module('myMod', []);
     angular.module('myMod').controller('mycontroller' , function($scope) {
        $scope.myArray = ['1', '2', '3'];

        $scope.myFunction = function(last, item, ev){
            if(last == true){
               setTimeout(function(){ 
                 var el = $(item).width(); 
                 console.log(el); 
               }, 500);
            };
        };
     });
 </script>
 <body ng-app="myMod">
    <div ng-controller="mycontroller">
      <div ng-repeat="item in myArray track by $index">
        <span id="myEle{{$index}}" ng-init="myFunction($last, '#myEle' + $index)">{{item}}</span>
      </div>
    </div>
</body>

同样，我不推荐这种方式，因为它有点凹凸不平，可以通过角度指令更好地完成。如果你坚持不使用指令，这也将完成你所需要的。

此处正在使用jsFiddle

Angular ng-repeat，在没有指令的情况下触发事件

2 个答案:

Angular ng-repeat，在没有**指令的情况下触发事件**

2 个答案:

Angular ng-repeat，在没有指令的情况下触发事件