Angular1.x 사용자 정의 명령 인 스 턴 스 상세 설명

7093 단어 Angular사용자 정의 명령
이 글 의 실례 는 Angular 1.x 사용자 정의 명령 을 설명 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
Module.directive 방법 을 호출 하여 명령 이름과 공장 함 수 를 입력 하고 대상 을 되 돌려 줍 니 다.
명령 이름 에 있 는 모든 대문자 들 은 속성 명 에 있 는 독립 된 단어 로 여 겨 지고 모든 단어 들 은 하나의 연결 문자 로 구 분 됩 니 다.

var myApp = angular.module('myApp', [])
  .directive("unorderedList", function () {
    return function(scope, element, attrs) {
    };
  });
반환 체인 함수

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Demo</title>
  <link rel="stylesheet" href="../css/bootstrap.css" rel="external nofollow" />
  <link rel="stylesheet" href="../css/bootstrap-theme.css" rel="external nofollow" >
  <script src="../js/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3>Products</h3>
    </div>
    <div class="panel-body">
      <div unordered-list="products"></div>
    </div>
  </div>
</body>
<script>
var myApp = angular.module('myApp', [])
  .controller('myCtrl', ["$scope", function ($scope) {
    $scope.products = [
      { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
      { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
      { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
    ];
  }])
  .directive("unorderedList", function () {
    return function (scope, element, attrs) {
      var data = scope[attrs['unorderedList']];
      if( angular.isArray(data) ){
        for(var i=0, len=data.length; i<len; i++){
          console.log(data[i].name);
        }
      }
    };
  });
</script>
</html>
데이터 속성 에 대한 의존 을 깨뜨리다
연산 에 참가 해 야 할 키 를 동적 으로 설정 하 는 요소 속성 을 설정 합 니 다.속성 명 이 data-를 접두사 로 한다 면 AngularJS 는 연결 함수 에 전 달 된 속성 집합 을 생 성 할 때 이 접 두 사 를 제거 합 니 다.즉,data-list-property 와 list-property 는 모두 list Property 로 표시 된다.

<div unordered-list="products" list-property="name"></div>


var data = scope[attrs['unorderedList']];
var propertyName = attrs['listProperty'];
if(angular.isArray(data)){
  var listElem = angular.element("<ul>");
  element.append(listElem);
  for(var i=0, len=data.length; i<len; i++){
    listElem.append( angular.element('<li>').text(data[i][propertyName]) );
  }
}
계산 식

<div unordered-list="products" list-property="price | currency"></div>
필 터 를 추가 한 후 사용자 정의 명령 이 파괴 되 었 습 니 다.역할 영역 에서 속성 값 을 표현 식 으로 계산 할 수 있 습 니 다.scope.$eval()은 두 개의 인 자 를 받 습 니 다.계산 할 표현 식 과 이 계산 을 실행 할 임의의 로 컬 데 이 터 를 받 아야 합 니 다.

listElem.append( angular.element('<li>').text(scope.$eval(propertyName, data[i])) );
처리 데이터 변화

<div class="panel-body">
  <button class="btn btn-primary" ng-click="incrementPrices()">
    Change Prices
  </button>
</div>


$scope.incrementPrices = function () {
  for(var i=0,len = $scope.products.length; i<len; i++){
    $scope.products[i].price++;
  }
}
모니터 추가

if(angular.isArray(data)){
  var listElem = angular.element("<ul>");
  element.append(listElem);
  for(var i=0, len=data.length; i<len; i++){
    var itemElem = angular.element('<li>');
    listElem.append(itemElem);
    var watchFn = function (watchScope) {
      return watchScope.$eval(propertyName, data[i]);
    };
    scope.$watch(watchFn, function (newValue, oldValue) {
      itemElem.text(newValue);
    });
  }
}
첫 번 째 함수(감청 기 함수)는 역할 영역 에 있 는 데 이 터 를 바탕 으로 값 을 계산 합 니 다.이 함 수 는 역할 영역 이 변 할 때마다 호출 됩 니 다.이 함수 의 반환 값 이 바 뀌 면 처리 함수 가 호출 됩 니 다.이 과정 은 문자열 표현 식 과 같 습 니 다.표현 식 에 필터 가 있 을 수 있 는 데 이 터 를 여 유 롭 게 감청 할 수 있 는 함 수 를 제공 합 니 다.
두 번 째 감청 기 함 수 는$eval()계 산 된 표현 변화 에 맞추어 리 셋 함 수 를 집행 한다.
이상 의 코드 는 정확하게 표시 되 지 않 습 니 다.for 순환 폐쇄 문제 와 관련 되 어 있 습 니 다.

for(var i=0, len=data.length; i<len; i++){
  (function () {
    var itemElem = angular.element('<li>');
    listElem.append(itemElem);
    var index = i;
    var watchFn = function (watchScope) {
      return watchScope.$eval(propertyName, data[index]);
    };
    scope.$watch(watchFn, function (newValue, oldValue) {
      itemElem.text(newValue);
    });
  }());
}
혹은

(function (i) {
  var itemElem = angular.element('<li>');
  listElem.append(itemElem);
  var watchFn = function (watchScope) {
    return watchScope.$eval(propertyName, data[i]);
  };
  scope.$watch(watchFn, function (newValue, oldValue) {
    itemElem.text(newValue);
  });
})(i);
jqLite
jqLite 에서element(),append()등의 방법의 매개 변 수 는 HTML string or DOMElement 이다.

return function (scope, element, attrs) {
  var listElem = element.append("<ol>");
  for (var i = 0; i < scope.names.length; i++) {
    listElem.append("<li>").append("<span>").text(scope.names[i]);
  }
}
위 에 추 가 된 것 은 문자열 입 니 다.마지막 으로 scope.names 의 마지막 정보 만 추가 합 니 다.

return function (scope, element, attrs) {
  var listElem = angular.element("<ol>");
  element.append(listElem);
  for (var i = 0; i < scope.names.length; i++) {
    listElem.append(angular.element("<li>")
        .append(angular.element("<span>").text(scope.names[i])));
  }
}
AngularJS 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.AngularJS 명령 조작 기법 총화,AngularJS 입문 및 진급 강좌과AngularJS MVC 구조 총화
본 고 에서 말 한 것 이 여러분 의 AngularJS 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
Android 웹 페이지 이미지 탐색 기능 구현
Android 날짜 선택 기 인 스 턴 스 코드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage