프로젝트에서 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有关的操作
    }
  };
});

두: 일부 속성 설명

[범위]

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

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

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

격리된 범위를 설정하는 또 다른 개체 설정 방법이 있습니다. 격리된 범위를 사용할 때 격리 외부의 장소와 상호 작용할 수 있는 세 가지 방법이 제공됩니다. 다음은 하나씩 설명하는 예입니다. 컨트롤러에 무엇이 있는지 살펴보겠습니다.

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: 뷰와 모델 사이의 데이터 형식 지정

필터 기능과 유사하게 때로는 합의를 촉진하기 위해 페이지에서 일종의 번역 후 데이터를 표시하기를 원하지만 데이터베이스의 경우 간단할 수 있습니다. 일련 번호가 더 유용하므로 이 기능을 구현하려면 링크에서 다음 방법을 사용해야 할 수도 있습니다.

$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
  console.error(email);
}

위의 $formatters 및 $parser는 보기에서 모델로, 모델에서 보기로 두 개의 대기열입니다. 내부 정의 필터링 방법은 파이프 흐름과 다소 유사하며 최종적으로 목적지로 흐릅니다.

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

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

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

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

1.ctrl.$formatters.unshift(function(input) {//model到view的数据格式化})；
2.ctrl.$parsers.unshift(function(input) {//view到model的数据格式化})。

2 값을 viewValue 및 modelValue에 동기화하는 동작을 직접 수동으로 트리거합니다.

$("input").trigger("change");

5 : 여러 단편 기술

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

2. 물론 컬렉션 모니터링과 같은 방법도 있습니다:

ctrl.$setViewValue($scope.info)。

3. 때로는 명령어에 새로 추가된 문자열을angularjs로 관리해야 할 경우 다음 방법을 사용하여 컴파일할 수 있습니다.

$scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});

믿습니다. 이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue 계산 속성 및 리스너 실제 프로젝트 세부 설명

JS+TypeScript에서 클래스를 사용하는 방법

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