사용자 지정 지시의 범위 바인딩에서 기호 '@', '&', '=' 및 '>' 사용: 각도JS

사용자 지정 지시의 범위 바인딩에서 기호 '@', '&', '=' 및 '>' 사용: 각도JS

Angular에서 커스텀 디렉티브의 구현에 이러한 기호를 사용하는 것에 대해 많이 읽어 왔습니다.JS인데 아직 콘셉트가 잘 안 잡혀요.

커스텀 디렉티브에서 스코프 값 중 하나를 사용하는 경우는 어떤 의미입니까?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

스코프로 정확히 뭘 하는 거죠?

저도 잘 모르겠어요. "scope:'>'" 공식 문서에 존재하는지 여부를 확인합니다. 제 프로젝트에 사용됐어요. (의 사용방법"scope:'>'"문제가 되어 수정되었습니다.)

>매뉴얼에 기재되어 있지 않습니다.

<단방향 바인딩용입니다.

@binding은 문자열을 전달하기 위한 것입니다.이러한 문자열은{{}}보간된 값에 대한 식입니다.

=바인딩은 양방향 모델 바인딩용입니다.상위 범위의 모델은 지시문의 격리된 범위의 모델에 링크됩니다.

&binding은 디렉티브 내에서 호출할 수 있도록 디렉티브의 범위에 메서드를 전달하기 위한 것입니다.

범위: true in 디렉티브를 설정할 때 Angular js는 해당 디렉티브에 대한 새 스코프를 만듭니다.즉, 디렉티브스코프에 대한 변경은 부모 컨트롤러에 반영되지 않습니다.

각진 상태JS 디렉티브를 사용하면 디렉티브가 적용되는 요소의 속성에 있는 데이터에 액세스할 수 있습니다.

이것은, 예를 들면 다음과 같습니다.

<div my-customer name="Customer XYZ"></div>

및 지시적 정의:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

언제?scopeproperty가 사용되는 것은 디렉티브가 이른바 "sublic scope" 모드로, 부모 컨트롤러의 스코프에 직접 액세스 할 수 없는 것을 의미합니다.

매우 간단한 용어로 바인딩 기호의 의미는 다음과 같습니다.

someObject: '='(양방향 데이터 바인딩)

someString: '@'(직접 또는 쌍컬리 괄호 표기로 보간 통과){{}})

someExpression: '&'(예:hideDialog())

이 정보는 Angular에 있습니다.JS 디렉티브 문서 페이지(단, 페이지 전체에 어느 정도 퍼져 있습니다).

기호>는 구문의 일부가 아닙니다.

하지만,<Angular의 일부로 존재합니다.JS 컴포넌트바인딩으로 단방향 바인딩을 의미합니다.

<단방향 결합

=쌍방향 결합

&함수 결합

@문자열만 전달하다

고객 디렉티브를 작성할 때 디렉티브의 범위는 격리된 범위에 포함될 수 있습니다.즉, 디렉티브와 컨트롤러는 모두 독자적인 범위를 가지고 있기 때문에 디렉티브의 범위는 컨트롤러와 공유되지 않습니다.단, 데이터는 세 가지 방법으로 지시 범위에 전달할 수 있습니다.

1. 할 수 .@스트링 리터럴, 패스 스트링 값, 단방향 바인딩.
2. 할 수 .=, , binding.string literal, pass object, 2ways.
3. 될 수 있습니다.& literal, function,string literal로 할 수 .

앵귤러지시사항에 대한 JS 문서는 기호의 의미에 대해 잘 쓰여져 있습니다.

확실히 하자면, 당신은 그냥 이 모든 것을

scope: '@'

명령어 정의로 정의됩니다.다음과 같이 이러한 바인딩이 적용되는 속성이 있어야 합니다.

scope: {
    myProperty: '@'
}

이 사이트의 설명서와 튜토리얼을 읽어보시길 강력히 권장합니다.격리된 범위 및 기타 항목에 대해 알아야 할 정보가 훨씬 더 많습니다.

한 '값에 인용입니다.scope:

스코프 속성은 true, 객체 또는 false 값일 수 있습니다.

• falsey: 디렉티브의 스코프는 작성되지 않습니다.지시문은 상위 범위를 사용합니다.

• true되는 새 명령어 요소에 대해 부모로부터 프로토타입으로 상속되는 새 자식 범위가 생성됩니다.같은 요소의 여러 디렉티브가 새로운 범위를 요구하면 새로운 범위는 1개만 생성됩니다.템플릿의 루트는 항상 새 범위를 가져오기 때문에 새 범위 규칙은 템플릿의 루트에 적용되지 않습니다.

• {...} (개체 해시):지시어 요소에 대해 새로운 "분리" 범위가 생성됩니다.'분리' 범위는 원형적으로 상위 범위에서 상속되지 않는다는 점에서 일반 범위와 다릅니다.이 기능은 재사용 가능한 구성 요소를 만들 때 유용합니다. 이 구성 요소는 실수로 상위 범위의 데이터를 읽거나 수정하지 않아야 합니다.

^{CC-by-SA 3.0으로 라이선스된 https://code.angularjs.org/1.4.11/docs/api/ng/service/$compile#-scope-,에서 2017-02-13을 취득했습니다.}

AngularJS 중 데 가 있었습니다.AngularJS 1.6만 취득했습니다. 이치노undefined같은 파일에 있는 다른 바인딩과 같은 방법으로 작업을 수행했는데도 말이죠.

문제는 변수 이름에 밑줄이 있다는 것이었습니다.

실패:

bindings: { import_nr: '='}

이 방법은 다음과 같습니다.

bindings: { importnr: '='}

(원래의 질문과는 완전히 관계가 있는 것은 아니지만, 제가 봤을 때는 검색 결과 상위 중 하나였기 때문에, 같은 문제를 안고 있는 사람에게 도움이 되었으면 합니다.)

언급URL : https://stackoverflow.com/questions/37818740/use-of-symbols-and-in-custom-directives-scope-binding-angula