Angular 1.x 복잡 명령 인 스 턴 스 상세 설명

본 논문 의 사례 는 Angular 1.x 복잡 한 명령 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
명칭.
묘사 하 다.
compile
컴 파일 함수 지정
controller
명령 에 컨트롤 러 함 수 를 만 듭 니 다.
link
명령 에 대한 링크 함수 지정
replace
템 플 릿 내용 이 명령 에 적 용 된 요 소 를 바 꿀 지 여부 입 니 다.
require
컨트롤 러 에 대한 의존 도 를 설명 합 니 다.
restrict
ACEM 을 어떻게 사용 할 지 지정 합 니 다.
scope
명령 에 새로운 역할 영역 이나 격 리 된 역할 영역 을 만 듭 니 다.
template
HTML 문서 에 삽 입 될 템 플 릿 을 지정 합 니 다.
templateUrl
HTML 문서 에 삽 입 될 외부 템 플 릿 을 지정 합 니 다.
transclude
명령 이 임의의 내용 을 포함 하 는 데 사 용 될 지 여부 입 니 다.

.directive('unorderedList', function () {
  return {
    link: function (scope, element, attrs) {
      var data = scope[attrs['unorderedList'] || attrs['listSource'] ];
      var propertyName = attrs['listProperty'] || "price || currency";
      if(angular.isArray(data)){
        var listElem = angular.element("<ul>");
        if(element[0].nodeName == "#comment"){
          element.parent().append(listElem);
        }else{
          element.append(listElem);
        }
        for(var i=0, len=data.length; i<len; i++){
          var itemElem = angular.element('<li>').text(scope.$eval(propertyName, data[i]));
          listElem.append(itemElem);
        }
      }
    },
    restrict:'EACM'
  };
});

명령 을 어떻게 사용 합 니까?
원소 로 사용 하기(E)

<unordered-list list-source="products" list-property="price | currency" />

unordered-list 를 요소 로 사용 할 때 unordered-list 속성 대신 다른 속성 을 추가 해 야 합 니 다.

var data = scope[attrs['unorderedList'] || attrs['listSource'] ];

속성 으로 사용(A)

<div unordered-list="products" list-property="price | currency"></div>

클래스 의 속성 값 으로 사용(C)

<div class="unordered-list: products" list-property="price | currency"></div>

주석 으로 사용 하기(M)

<!-- directive: unordered-list products -->

템 플 릿 명령 사용

.directive('unorderedList', function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs['unorderedList']];
    },
    restrict: 'A',
    template:"<ul><li ng-repeat='item in data'>{{item.price | currency}}</li></ul>"
  };
});

템 플 릿 으로 함수 사용 하기
template 속성 은 문자열 을 사용 하 는 것 외 에 도 템 플 릿 화 된 내용 을 만 들 수 있 는 함 수 를 지정 할 수 있 습 니 다.이 함 수 는 두 함수(명령 에 응 용 된 요소 와 속성 집합)를 입력 하고 문서 에 삽 입 될 HTML 코드 세 션 을 되 돌려 줍 니 다.

<script type="text/javascript" id="listTemplate">
  <ul>
    <li ng-repeat="item in data">{{item.price | currency}}</li>
  </ul>
</script>
<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 {
        link: function (scope, element, attrs) {
          scope.data = scope[attrs['unorderedList']];
        },
        restrict: 'A',
        template:function () {
          return angular.element(
              document.querySelector("#listTemplate")
          ).html();
        }
      };
    });
</script>

외부 템 플 릿 사용
itemTemplate.html

<p>This is the form the template file</p>
<ul>
  <li ng-repeat="item in data">{{item.price | currency}}</li>
</ul>

.directive('unorderedList', function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs['unorderedList']];
    },
    restrict: 'A',
    templateUrl:"itemTemplate.html"
  };
});

함수 로 외부 모드 선택
tableTemplate.html

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td>{{item.name}}</td>
      <td>{{item.price | currency}}</td>
    </tr>
  </tbody>
</table>

<div unordered-list="products" template="table" class="table table-striped">
  This is where the list will go
</div>

.directive('unorderedList', function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs['unorderedList']];
    },
    restrict: 'A',
    templateUrl: function (elem, attrs) {
      return attrs['template'] == "table" ? "tableTemplate.html" : "itemTemplate.html";
    }
  };
});

table-triped 스타일 은 작 동 하지 않 습 니 다.replace 속성 을 true 로 설정 한 후의 효 과 는 모드 콘 텐 츠 가 명령 에 응 용 된 div 요 소 를 교체 하 는 것 입 니 다.
관리 명령 의 역할 영역
모든 명령 인 스 턴 스 를 위해 자신의 역할 도 메 인 을 만 듭 니 다.
scope 속성 을 true 로 설정 하면 같은 컨트롤 러 에서 이 명령 을 재 활용 할 수 있 고 명령 이 데이터 값 을 공유 하 는 것 을 피 할 수 있 습 니 다.

<div class="panel panel-default">
  <div class="panel-body" scope-demo></div>
  <div class="panel-body" scope-demo></div>
</div>

var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
  $scope.data = {name:"Staven"};
  $scope.city = "China"
}])
.directive('scopeDemo', function () {
  return {
    template: function () {
      return angular.element(document.querySelector("#scopeTemplate")).html();
    },
    scope:true
  };
});

data.name 이 속성 은 한 대상 에서 정 의 된 것 으로 이 값 은 명령 의 형 인 스 턴 스 간 에 공유 되 고 모든 보 기 는 동기 화 됩 니 다.
city 는 컨트롤 러 의 역할 에 직접 할당 되 는 것 으로 이 값 은 이 명령 의 역할 영역 에서 만 유효 하 다 는 것 을 의미한다.
격 리 된 역할 영역 만 들 기
한 대상 에 정 의 된 속성 은 다른 사람 에 의 해 변 경 될 수 있 습 니 다.해결 방법 은 격 리 된 역할 영역 을 만 드 는 것 입 니 다.바로 Angularjs 가 명령 의 모든 인 스 턴 스 를 위해 독립 된 역할 영역 을 만 드 는 곳 입 니 다.그러나 이 역할 영역 은 컨트롤 러 의 역할 영역 을 계승 하지 않 습 니 다.scope 정의 속성 이 대상 으로 설정 되 었 을 때 격 리 된 역할 도 메 인 을 만 들 수 있 습 니 다.격 리 된 역할 영역의 가장 기본 적 인 유형 은 속성 이 없 는 대상 으로 표시 하 는 것 이다.

.directive('scopeDemo', function () {
  return {
    template: function () {
      return angular.element(document.querySelector("#scopeTemplate")).html();
    },
    scope:{}
  };
});

서로 다른 상황 에서 재 활용 명령 을 만 들 때 격 리 된 역할 도 메 인 은 중요 한 구조물 일 때.컨트롤 러 역할 영역 과 명령 사이 에 예상 치 못 한 상호작용 이 나타 나 는 것 을 막 았 기 때문이다.그러나 하나의 명령 을 완전히 차단 하면 데 이 터 를 입력 하고 출력 하기 어 려 울 것 이다.
단 절 된 역할 영역 은 명령 옆 에 있 는 요소 의 속성 을 사용 하여 데이터 값 을 컨트롤 러 역할 영역 에 연결 할 수 있 습 니 다.
단 방향 귀속@:
@을 접두사 로 하 는 역할 영역 대상 에 속성 을 추가 하여 격 리 된 작용력 으로 단 방향 바 인 딩 을 만 듭 니 다.

<body ng-app="myApp" ng-controller="myCtrl">
  <div class="panel panel-default">
    <div class="panel-body">
      Direct Binding:<input ng-model="data.name" />
    </div>
    <div class="panel-body" scope-demo nameprop="{{data.name}}"></div>
  </div>
</body>
<script type="text/ng-template" id="scopeTemplate">
  <div class="panel-body">
    <p>Data Value:{{local}}</p>
  </div>
</script>
<script>
var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
  $scope.data = {name:"staven"};
}])
.directive('scopeDemo', function () {
  return {
    template: function () {
      return angular.element(document.querySelector("#scopeTemplate")).html();
    },
    scope:{
      local:"@nameprop"
    }
  };
});
</script>

local 속성의 값 은@을 접두사 로 속성 local 의 값 을 만 들 었 습 니 다.namepop 이라는 특성 에서 단 방향 바 인 딩 으로 얻 을 수 있 습 니 다.
격 리 된 역할 영역 을 사용 하여 명령 이 컨트롤 러 역할 영역 에서 의 데 이 터 를 계승 하지 않 습 니 다.
양 방향 귀속=:
=접 두 사 를 위 한 역할 영역 대상 에 속성 을 추가 하여 격 리 된 역할 영역 에 양 방향 바 인 딩 을 만 듭 니 다.
격 리 에 사용 되 는 단 방향 바 인 딩 은 항상 문자열 값 으로 계산 되 며,배열 에 접근 하려 면 양 방향 바 인 딩 을 사용 해 야 합 니 다.

<div class="panel panel-default">
  <div class="panel-body">
    Direct Binding:<input ng-model="data.name" />
  </div>
  <div class="panel-body" scope-demo nameprop="data.name"></div>
</div>
<script type="text/ng-template" id="scopeTemplate">
  <div class="panel-body">
    <p>Data Value:<input ng-model="local" /></p>
  </div>
</script>
<script>
  scope:{
    local:"=nameprop"
  }
</script>

단 방향 바 인 딩 을 사용 할 때"{{"와"}"문자 로 둘러싸 인 바 인 딩 표현 식 을 제공 합 니 다.그러나 angularjs 는 양 방향 바 인 딩 에서 어떤 속성 이 업데이트 되 어야 하 는 지 알 아야 하기 때문에"{{"와"}"에 둘러싸 일 필요 가 없습니다.
계산 식&:
&를 접두사 로 하 는 역할 영역 대상 에 속성 을 추가 하고 부모 역할 영역의 상하 문 에 표현 식 을 계산 합 니 다.

<body ng-app="myApp" ng-controller="myCtrl">
<div class="panel panel-default">
  <div class="panel-body">
    Direct Binding:<input ng-model="data.name" />
  </div>
  <div class="panel-body" scope-demo city="getCity(data.name)" nameprop="data.name"></div>
</div>
</body>
<script type="text/ng-template" id="scopeTemplate">
  <div class="panel-body">
    <p>Name:{{local}}, City:{{cityFn()}}</p>
  </div>
</script>
<script>
var myApp = angular.module('myApp', [])
.controller('myCtrl', ["$scope", function ($scope) {
  $scope.data = {name:"staven",defaultCity:"hefei"};
  $scope.getCity = function (name) {
    console.log(1);
    return name == 'staven' ? $scope.data.defaultCity : "Unknown";
  }
}])
.directive('scopeDemo', function () {
  return {
    template: function () {
      return angular.element(document.querySelector("#scopeTemplate")).html();
    },
scope:{
  local:"=nameprop",
  cityFn:"&city"
}
  };
});
</script>

cityFn()을 호출 할 때 괄호 를 사 용 했 습 니 다.이 특성 에 의 해 지정 한 표현 식 을 계산 하려 면 표현 식 자체 가 함수 호출 일 때 도 필요 합 니 다.
격 리 작용 역 의 데 이 터 를 사용 하여 표현 식 을 계산 합 니 다
대체 계 산 된 격 리 작용 역 의 데 이 터 를 컨트롤 러 작용 역 표현 식 의 일부분 으로 할 수 있다.

<div class="panel-body" scope-demo city="getCity(nameVal)" nameprop="data.name"></div>
<script type="text/ng-template" id="scopeTemplate">
  <div class="panel-body">
    <p>Name:{{local}}, City:{{cityFn({nameVal: local})}}</p>
  </div>
</script>

AngularJS 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.AngularJS 명령 조작 기법 총화,AngularJS 입문 및 진급 강좌과AngularJS MVC 구조 총화
본 고 에서 말 한 것 이 여러분 의 AngularJS 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.