Angularjs 사용자 정의 지시문을 사용하는 방법

이번에는 Angularjs커스텀 명령어 사용법과 Angularjs 커스텀 명령어 사용 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

One: 사용자 정의 지침에 일반적으로 사용되는 템플릿

다음은 포괄적이지 않은 대략적인 설명입니다. 언급되지 않은 일부 세부 사항과 중요한 관련 지식은 나중에 설명됩니다.

angular.module('yelloxingApp', []).directive('uiDirective', function() {
  return {  
    restrict:String,//标明该指令可以在模板中用于元素E、属性A、类C和注释M或组合    
    priority:Number,//设置指令执行优先级，在某个DOM上优先级高的会先执行
        terminal:Boolean,    
    template:String or Template Function,//就是设置模板，和下面的templateUrl属性二个只可以设置一个，目的一样    
    templateUrl:String or Template Function,//除了字符串，这二个属性还可以设置函数    
    replace:Boolean,//指令模板是否替换原来的元素    
    scope:Boolean or Object,
    controller:String or function(scope, element, attrs) { ... },    
    require:String or Array,    
    //你需要知道link在每个实例都执行一遍，compile全程只会执行一遍
    link: function(scope, element, attrs,ctrl) { ... },    
    compile:function(element, attrs) {
      //常用的就是compile的此处写执行一次的代码，或者在link方法里面写和dom有关的操作
    }
  };
});

Two: 일부 속성 설명

[범위]

부울 또는 객체를 먼저 설정할 수 있습니다. 이는 비교적 간단합니다.

1. true로 설정하면 상위 범위를 상속한다는 의미이며

2. false로 설정하려면 상위 범위를 직접 사용하세요.

격리된 범위를 설정하는 개체 설정 방법도 있습니다. 격리된 범위를 사용할 때 격리 외부의 장소와 상호 작용할 수 있는 세 가지 방법이 제공됩니다. 다음은 하나씩 설명하는 예입니다.

controller

에 무엇이 있는지 살펴보겠습니다.

angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) {
  return {
    restrict: 'A',    
    scope: {
      _userDataName: "=userDataName",
      _onSend: "&onSend",
      _fromName: "@fromName"
    },    
    template: `
      <button ng-click="_useParentMethod()">
        点击按钮调用父级的方法
      </button>
      
      <input ng-model="_userDataName"/>
      <ul>
        <li>fromName={{newfromname}}</li>
        <li>这是从父级获取到的{{_userDataName}}</li>
      </ul>`,
       link: function($scope, element, attrs) {
      //使用@符号可将本地作用域的变量与DOM属性的值进行绑定，即这里通过@得到父类fromName的值
      $scope.newfromname = $scope._fromName;
      $scope._useParentMethod = function() {      
        //使用&符号可以在其中调用父类的方法
        $scope._onSend({ "email": { "email": "yelloxing@gmail.com" } });
        console.log($scope._userDataName);        
      };
    }
  };
}]);

마지막으로 html에서 사용하는 것을 잊지 마세요.

코드 복사

코드는 다음과 같습니다.

【require】

다른 요청 컨트롤러를 선택하고 네 번째 링크 방법으로 사용합니다. 매개변수를 전달할 때 우리가 주목해야 할 것은 컨트롤러를 찾는 방법입니다.

컨트롤러를 찾는 방법은 다음과 같이 이해할 수 있습니다. 사용? 현재 명령에서 필요한 컨트롤러를 찾을 수 없는 경우 링크 함수의 네 번째 매개변수로 null이 전달됨을 나타냅니다. ^ 접두사가 추가되면 명령은 필수 매개변수에 지정된 컨트롤러를 검색합니다. 업스트림 명령 체인. 예를 들어 require: "?^ngModel"과 같이 결합할 수도 있습니다. 접두사가 없으면 명령어는 컨트롤러(또는 지정된 이름을 가진 명령어)가 없으면 자체적으로 검색합니다. 발견하면 실수가 발생합니다.

[terminal]

속성 터미널: true인 경우 현재 명령어보다 우선순위가 낮은 명령어는 실행되지 않고, 이 명령어만 실행됩니다.

3: 뷰와 모델 사이의 데이터 형식화

는

filter

의 기능과 유사합니다. 때로는 합의를 촉진하기 위해 페이지에 일종의 번역 후 데이터가 표시되기를 원할 수도 있습니다. 데이터베이스 간단한 일련 번호가 더 유리하므로 이 기능을 달성하려면 링크에서 다음 방법을 사용해야 할 수도 있습니다: 1.ctrl.$formatters.unshift(function(input) {//모델에서 뷰로 데이터 형식 지정 } );

2.ctrl.$parsers.unshift(function(input) {//뷰에서 모델로의 데이터 형식 지정}).

위의 $formatters와 $parser는 뷰에서 모델로, 모델에서 뷰로의 두 가지 대기열로, 파이프라인 흐름과 다소 유사하게 내부에 정의된 메서드를 통해 필터링을 용이하게 하고 최종적으로 대상으로 흐릅니다.

컨트롤러를 찾으려면 require: "?ngModel"과 같은 문을 설정하는 것을 잊지 마세요.

네 가지: 보기 및 모델 데이터 동기화 문제

때때로 명령에서 jquery를 통해 입력 데이터가 수정되지만 Anglejs는 이를 인식하지 못합니다. 이때 다음 방법 중 하나를 선택할 수 있습니다.

1. 입력 상자 변경을 트리거하고 Angularjs가 데이터가 변경되었음을 발견한 다음 $setViewValue(value)를 호출하여 데이터를 동기화합니다. $("input").trigger("change");

2 직접 수동으로 트리거합니다. viewValue에 대한 값 동기화 및 modelValue의 동작: ctrl.$setViewValue($scope.info).

다섯 가지: 몇 가지 단편적인 기술

1. 입력 상자가 적합한지 여부에 따라 true 또는 false를 설정합니다. ctrl.$setValidity(errorType, boolean);//errorType은 오류 범주를 나타내며 사용자 정의할 수 있습니다

2. 모니터링 사양 모델 값은 물론 모니터링 컬렉션과 같은 방법도 있습니다: $scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});

3. 지침 Anglejs로 관리해야 하는 경우 $compile(newHtml)($scope) 방법을 사용하여 컴파일할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Angular CLI를 사용하여 Angular 프로젝트를 만드는 방법

JS를 사용하여 Huffman 코딩을 구현하는 방법

위 내용은 Angularjs 사용자 정의 지시문을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!