Angularjs의 사용자 지정 지시문에 대한 몇 가지 유용한 세부 정보 및 팁

이 문서에서는 angularjs사용자 정의 지침의 중요한 세부 정보와 기술이 무엇인지 주로 설명합니다. 모르신다면 오셔서 이것저것 구경해 보세요. 이 글을 함께 살펴보겠습니다

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

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

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有关的操作
        }
    };
});

2: 일부 속성 설명

[범위]

부울 또는 객체를 설정할 수 있습니다. 먼저 부울에 대해 이야기해 보겠습니다. 이것은 비교적 간단합니다.

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에서 사용하는 것을 잊지 마세요.

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

【require】

다른 컨트롤러를 요청한 다음 이를 링크 방식의 네 번째 매개변수 들어가고, 우리가 주목해야 할 것은 컨트롤러를 찾는 방식이다.

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

AngularJS 개발 매뉴얼

을 참조하세요.) [terminal]

속성 터미널: true인 경우 현재 명령어보다 낮은 우선순위를 나타내는 명령어는 처리되지 않습니다. 실행되며 이 명령만 실행됩니다.

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

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

1.ctrl.$formatters.unshift(function(input) {//모델에서 보기로 데이터 형식 지정});

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

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

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

4: 보기 및 모델 데이터 동기화 문제

때때로 명령에서 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) 방법을 사용하여 컴파일할 수 있습니다.

Six: 일반적으로 사용되는 메서드 또는 서비스

문자열을 구문 분석하는 방법에는 두 가지가 있습니다(속성 또는 메서드일 수 있음). 아래 예를 살펴보세요.

<p scope-example user-data-name="user" on-send=&#39;sendMail(email)&#39; from-name={{name}}></p>

좋아, 이 문서는 여기에 있습니다(생각해 보세요). 자세한 내용은 PHP 중국어 웹사이트

AngularJS 사용자 매뉴얼

을 참조하세요. 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 Angularjs의 사용자 지정 지시문에 대한 몇 가지 유용한 세부 정보 및 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!