angularjs directive 속성 분석

코드 샘플

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function (scope, element) {
      scope.name = 'Jeff';
    }
  };
});

restrict

E: 이directive는 요소 방식으로만 사용할 수 있음을 나타낸다. 즉,

A: 이 directive는attribute 방식으로만 사용할 수 있음을 나타냅니다. 즉,

EA: 이directive는 요소 방식으로도 사용할 수 있고attribute 방식으로도 사용할 수 있음을 나타낸다

transclude 당신의directive는 페이지의 다른 html 내용을 받아들일 때 사용할 수 있으므로 이 인자를 제거하는 것을 권장합니다.좀 높아졌어.

scope는 이 속성을 썼을 때 이directive는 controller에서 $scope 대상을 계승하지 않고 다시 만들 것입니다.

templateUrl 당신의directive의 html내용

link:function(scope,element,attr,ctrl,linker)은directive가angular에 의해 컴파일된 후에 이 방법을 실행하는 것으로 간단하게 이해할 수 있다.

scope: 지령이 있는 작용역

element: 지령 요소의 봉인, angular 봉인의 간단한 jq 방법과 속성을 호출할 수 있음

attr: 명령 요소의 속성 집합, 예를 들어 페이지에directive: 라고 쓰면attrs는 다음과 같다.

{
type: 'modal',
animation: 'fade'
}

ctrl: 기타 지령을 호출하는 방법에 사용되며, 지령 간의 상호 통신에 사용되며, 리퀘스트

에 협조해야 한다.

linker:transClude에 삽입된 내용

참조 링크

https://segmentfault.com/q/1010000002400734

http://blog.csdn.net/qq_30100043/article/details/53181673

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Angulars Controller 역할 도메인 상속

1, 누드 값, 참조가 아닌 복사 childbutton을 누르면parentbutton이 변하지 않습니다. 하위 작용역이 부모 작용역에 대한 $scope 인용은 인용이 아니라 복제할 가치가 있음을 나타냅니다. 2. 대...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

angularjs directive 속성 분석

참조 링크

좋은 웹페이지 즐겨찾기