AngularJS에서 사용자 정의 지시자로 ng 대체-repeat 메서드

서론

모두가 알지만, 작은 데이터 집합을 처리할 때는 ng-repeat는 매우 유용하지만, 매우 큰 데이터 집합을 처리할 때는 사용자 정의 메서드를 사용하는 것이 더 좋습니다. 특히 데이터가 대부분 정적이거나 미리 저장된 경우, ng-repeat 지시.

ng-repeat의 표현식과 $watch

Angular의 표현식은 모두 $watch의 Scope 함수를 생성합니다. 모델이 변경될 때마다 감지하고 알림을 주는 데 사용됩니다. ng-repeat 지시에서, 어떤 행 데이터가15데이터가 바인딩된 열 데이터가 있으면1000행 이상이면, $watch는 또 한 번 보너스를 받습니다.15000개가 있으면, 이 성능은 상상할 수 없을 정도로 좋습니다.

따라서 우리가 ng-repeat의 기능을 성능과 함께 가지고 싶다면, 다른 방법을 찾아야 합니다.

ng-repeat 메서드

내용이 정적이면, 두 가지 방법의 바인딩을 필요하지 않으며, {{::value}}를 단 한 번 실행하면 됩니다. 만약 angularJS가1.3아래의 구버전은 일회성 바인딩 문법을 지원하지 않습니다. 따라서 가장 좋은 방법은 사용자 정의 지시를自定义 지시를 만드는 것이며, 다시 말해, 정적 데이터는 간단한 방법으로 포맷할 수 있습니다.

구현 단계

1、먼저 불연속 목록을 생성하여 동적으로 바인딩된 내용을 저장합니다.

리스트를 표시하기 위해 사용할 컨테이너로 UL 태그를 생성합니다.

List 데이터를 동적으로 로드하려면, 먼저 div 태그를 추가하고 "repeater"라는 이름을 지정합니다.-alternative"를 통해 스트림에 렌더링용.

<div>
 <ul>
  <div repeater-alternative></div>
 </ul>
</div>

2、List 데이터 정의:

//예제 데이터
var studentsList = 
[
 {
  FirstName: "Raj,
  LastName : "B",
  Country : "India",
  BirthDate: "01/01/1990"
 },
 {
  FirstName: "Kumar,
  LastName : "S",
  Country : "India",
  BirthDate: "01/01/1990"
 },
 ..................
 ..................
 ..................
 ..................
];
$scope.collectionObject = studentsList; //分配给$scope函数

3、实际List内容

主要目的是适用于重复集合对象，并显示到列表中，所以需要制定访问循环的逻辑，并按照需求来格式化字符串。

var tableRow = "";
angular.forEach($scope.collectionObject, function (item) {
  tableRow = tableRow + ['<li>',
  '<div class="col-md-1">' + item.FirstName + '</div>
  '<div class="col-md-1 ">' + item.LastName + '</div>
  '<div class="col-md-1 ">' + item.Country+ '</div>
  '<div class="col-md-1 ">' + item.Id + '</div>
  '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div>
  '</li>'].join('');
});

4、List格式化逻辑

一旦collectionObject的值已被赋给其他变量，就需要定义显示数据的表格。

5、如何获取分配CollectionObject的时间

Angular会监控$scope变量的值的变化，一旦值被修改，则$watch将被触发，所以需要将CollectionObject的赋值逻辑放到$scope变量的$watch中。

下面的代码：

$scope.$watch($scope.object, function (oldValue, newValue) { 
})

也就是说，当我们执行赋值语句时，Angular会处理这个事件，并格式化List的内容。

$scope.$watch('collectionObject', function (oldValue, newValue) {
 var tableRow = "";
 angular.forEach($scope.collectionObject, function (item) {
  tableRow = tableRow + ['<li>',
  '<div class="col-md-1">' + item.FirstName + '</div>
  '<div class="col-md-1 ">' + item.LastName + '</div>
  '<div class="col-md-1 ">' + item.State + '</div>
  '<div class="col-md-1 ">' + item.Id + '</div>
  '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div>
  '</li>'].join('');
 });
})

接下来就是将内容渲染到表格控件中，也就是HTML<DIV>repeater-在"alternative"标签中。
首先必须理解Angular的Directive机制，简单来说，就是我们指示Angular，当指定的变量被发现时，就开始执行后台操作。

var userDirectives = angular.module([]);
userDirectives.directive('DOMElementFound', function () {
 return {
  replace: true,
  function ($scope, $elem, attrs) {
     //后台处理操作 }
 }
});

我们将通知Angular，当发现"repeater-如果在"alternative"元素中，则将以下数据渲染到列表行中。

下面的代码：

var userDirectives = angular.module([]);
userDirectives.directive('repeaterAlternative', function () {
 return {
  replace : true,
  function ($scope, $elem, attrs) {
   $scope.$watch('collectionObject', function (oldValue, newValue) {
    var tableRow = "";
    angular.forEach($scope.collectionObject, function (item) {
     tableRow = tableRow + ['<li>',
         '<div class="col-md-1">' + item.FirstName + '</div>
         '<div class="col-md-1 ">' + item.LastName + '</div>
         '<div class="col-md-1 ">' + item.State + '</div>
         '<div class="col-md-1 ">' + item.Id + '</div>
         '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div>
         '</li>'].join('');
    });
    //IE가 주요 브라우저라면, 성능을 향상시키기 위해 innerHTML를 권장합니다.
    $elem.context.innerHTML = tableRow;
    //IE가 주요 브라우저가 아니라면, 요소에 컨텐츠를 추가하는 것만으로도 충분합니다.
    //$elem.append(tableRow);
   });
  }
 }
});

결론

이 기사에서는 ng를 주로 모의했습니다.-repeat의 작동 방식과 논리는 동일하지만, 이는 정적 내용에 한정되므로, 호출된 ng와의 출력 결과는 동일합니다.-repeat 결과는 동일하지만, 이 메서드는 단일 데이터 바인딩 방식과 적은 $watch로 빠르게 렌더링됩니다. 이 기사의 모든 내용이며, 이 기사의 내용이 여러분의 학습이나 업무에 도움이 되길 바랍니다. 궁금한 점이 있으면 댓글을 달고 교류하세요.

기본 튜토리얼

좋아하는 것