AngularJS_AngularJS의 사용자 정의 지시문 사용에 대한 자세한 설명-JS 튜토리얼-php.cn

AngularJS_AngularJS의 사용자 정의 지시문 사용에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:54:28

원래의

1344명이 탐색했습니다.

AngularJS를 사용하여 맞춤 지침에서 HTML 기능을 확장하세요. 사용자 정의 지시문에 사용되는 "명령"의 기능적 정의입니다. 사용자 정의 지시문은 활성화된 요소를 간단히 대체합니다. 부트스트래핑 프로세스 중에 AngularJS 애플리케이션은 일치하는 요소를 찾고 지시문의 범위 기반 사용자 지정 지시문의 link() 메서드를 사용하여 요소를 처리하기 전에 사용자 지정 지시문의 compile() 메서드를 사용하여 활동을 준비합니다. AngularJS는 다음 요소 유형을 기반으로 사용자 정의 지시문 생성을 지원합니다.

요소 지시어 - 발견 시 일치하는 요소를 활성화하는 지시어입니다.
속성 - - 지시어가 발견되면 일치하는 속성을 활성화합니다.
CSS - - 지시어가 발견되면 일치하는 CSS 스타일을 활성화합니다.
코멘트 - - 명령이 발견되면 일치하는 코멘트를 활성화합니다.

맞춤 지시문에 대해 알아보기

맞춤 HTML 태그를 정의합니다.

<student name="Mahesh"></student><br/>
<student name="Piyush"></student>

로그인 후 복사

위의 사용자 정의 HTML 태그를 처리하기 위한 사용자 정의 지시어를 정의합니다.

var mainApp = angular.module("mainApp", []);

//Create a directive, first parameter is the html element to be attached.  
//We are attaching student html tag. 
//This directive will be activated as soon as any student element is encountered in html
mainApp.directive('student', function() {
  //define the directive object
  var directive = {};
  //restrict = E, signifies that directive is Element directive
  directive.restrict = 'E';
  //template replaces the complete element with its text. 
  directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
  //scope is used to distinguish each student element based on criteria.
  directive.scope = {
    student : "=name"
  }
  //compile is called during application initialization. AngularJS calls it once when html page is loaded.
  directive.compile = function(element, attributes) {
   element.css("border", "1px solid #cccccc");
  //linkFunction is linked with each element with scope to get the element specific data.
   var linkFunction = function($scope, element, attributes) {
     element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
     element.css("background-color", "#ff00ff");
   }
   return linkFunction;
  }
  return directive;
});

로그인 후 복사

범위를 업데이트하는 컨트롤러를 지시문으로 정의합니다. 여기서는 name 속성 값을 하위 범위로 사용합니다.

mainApp.controller('StudentController', function($scope) {
   $scope.Mahesh = {};
   $scope.Mahesh.name = "Mahesh Parashar";
   $scope.Mahesh.rollno = 1;

   $scope.Piyush = {};
   $scope.Piyush.name = "Piyush Parashar";
   $scope.Piyush.rollno = 2;
});

로그인 후 복사

예

<html>
<head>
  <title>Angular JS Custom Directives</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp" ng-controller="StudentController">
 <student name="Mahesh"></student><br/>
 <student name="Piyush"></student>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script>
   var mainApp = angular.module("mainApp", []);
  
   mainApp.directive('student', function() {
     var directive = {};
     directive.restrict = 'E';
     directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
     
     directive.scope = {
      student : "=name"
     }
  
     directive.compile = function(element, attributes) {
      element.css("border", "1px solid #cccccc");

      var linkFunction = function($scope, element, attributes) {
        element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
        element.css("background-color", "#ff00ff");
      }

      return linkFunction;
     }

     return directive;
   });
  
   mainApp.controller('StudentController', function($scope) {
      $scope.Mahesh = {};
      $scope.Mahesh.name = "Mahesh Parashar";
      $scope.Mahesh.rollno = 1;

      $scope.Piyush = {};
      $scope.Piyush.name = "Piyush Parashar";
      $scope.Piyush.rollno = 2;
   });
   
  </script>
</body>
</html>

로그인 후 복사

결과

웹 브라우저에서 textAngularJS.html을 엽니다. 다음과 같이 결과를 확인하세요.

2015617113318563.jpg (560×240)