[angularjs] 사용자 지정 지시문의 범위 바인딩에서 기호 ‘@’, ‘&’, ‘=’및 ‘>’사용 : AngularJS

AngularJS에서 사용자 지정 지시문을 구현할 때 이러한 기호 사용에 대해 많이 읽었지만 그 개념은 여전히 ​​명확하지 않습니다. 내 말은, 사용자 지정 지시문에서 범위 값 중 하나를 사용하면 무엇을 의미합니까?

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

여기서 우리는 범위를 정확히 무엇입니까?

공식 문서에 “scope : ‘>'” 가 있는지 여부도 확실 하지 않습니다. 내 프로젝트에서 사용되었습니다.

편집 -1

의 사용 “범위 : ‘>'” 내 프로젝트의 문제이고 그것은 수정되었습니다.



답변

AngularJS 지시문에서 범위를 사용하면 지시문이 적용되는 요소의 속성에있는 데이터에 액세스 할 수 있습니다.

이것은 예제와 함께 가장 잘 설명됩니다.

<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);
    }
  };
});

scope속성이 사용되는 지시어는 직접 부모 컨트롤러의 범위를 액세스 할 수 없습니다를 의미하는 소위 “고립 범위”모드에 있습니다.

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

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

someString: '@'(직접 또는 이중 중괄호 표기법으로 보간을 통해 전달됨 {{}})

someExpression: '&'(예를 들어 hideDialog())

이 정보는 AngularJS 지시문 문서 페이지 에 있지만 페이지 전체에 약간 퍼져 있습니다.

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

그러나 AngularJS 컴포넌트 바인딩의< 일부로 존재하며 단방향 바인딩을 의미합니다.


답변

> 설명서에 없습니다.

< 단방향 바인딩입니다.

@바인딩은 문자열을 전달하기위한 것입니다. 이 문자열 {{}}은 보간 된 값에 대한 표현식을 지원 합니다.

=바인딩은 양방향 모델 바인딩입니다. 부모 범위의 모델은 지시문의 격리 된 범위의 모델에 연결됩니다.

& 바인딩은 지시문 내에서 호출 될 수 있도록 메소드를 지시문 범위로 전달하기위한 것입니다.

지시문에서 scope : true를 설정하면 Angular js는 해당 지시문에 대한 새 범위를 만듭니다. 즉, 지시문 범위에 대한 변경 사항은 상위 컨트롤러에 다시 반영되지 않습니다.


답변

< 단방향 바인딩

= 양방향 바인딩

& 함수 바인딩

@ 문자열 만 전달


답변

고객 지시문을 작성할 때 지시문의 범위는 분리 된 범위에있을 수 있습니다. 지시문이 제어기와 범위를 공유하지 않음을 의미합니다. 지시어와 컨트롤러 모두 자체 범위가 있습니다. 그러나 데이터는 세 가지 가능한 방식으로 지시문 범위로 전달 될 수 있습니다.

  1. @문자열 리터럴, 패스 문자열 값, 단방향 바인딩을 사용하여 데이터를 문자열로 전달할 수 있습니다 .
  2. =문자열 리터럴, 전달 오브젝트, 두 가지 방법 바인딩을 사용하여 오브젝트로 오브젝트를 전달할 수 있습니다 .
  3. 데이터는 &문자열 리터럴 함수로 전달 될 수 있으며 외부 함수를 호출하며 지시문에서 컨트롤러로 데이터를 전달할 수 있습니다.

답변

지시문에 대한 AngularJS 문서 는 기호의 의미에 대해 잘 작성되었습니다.

분명히, 당신은 단지 가질 수 없습니다

scope: '@'

지시문 정의에서. 다음과 같이 해당 바인딩을 적용 할 속성이 있어야합니다.

scope: {
    myProperty: '@'
}

사이트의 설명서와 자습서를 읽어 보시기 바랍니다. 분리 된 범위 및 기타 주제에 대해 훨씬 더 많은 정보가 필요합니다.

다음은 위의 링크 페이지에서 인용 한 값입니다 scope.

scope 속성은 true, 객체 또는 잘못된 값일 수 있습니다.

  • falsy : 지시문에 대한 범위가 만들어지지 않습니다. 지시문은 부모의 범위를 사용합니다.

  • true: 지시어 요소에 대해 부모에서 프로토 타입으로 상속되는 새로운 하위 범위가 작성됩니다. 동일한 요소에 여러 지시문이 새 범위를 요청하면 하나의 새 범위 만 작성됩니다. 템플릿의 루트는 항상 새로운 범위를 가지므로 템플릿의 루트에는 새 범위 규칙이 적용되지 않습니다.

  • {...} (객체 해시) : 지시어 요소에 대해 새로운 “격리”범위가 생성됩니다. ‘격리’범위는 상위 범위에서 프로토 타입으로 상속되지 않는다는 점에서 일반 범위와 다릅니다. 이는 재사용 가능한 구성 요소를 작성할 때 유용하며, 이는 상위 범위의 데이터를 실수로 읽거나 수정해서는 안됩니다.

https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope-에서 CC- 02 -SA 3.0으로 라이센스를 취득하여 2017-02-13에서 검색 함


답변

AngularJS 1.6의 기호로 값을 바인딩하는 데 문제가있었습니다. undefined작동하는 동일한 파일의 다른 바인딩과 동일한 방식으로 수행했지만 아무 가치 도 얻지 못했습니다.

문제는 : 내 변수 이름에 밑줄이 있습니다.

이것은 실패합니다 :

bindings: { import_nr: '='}

이것은 작동합니다 :

bindings: { importnr: '='}

(원래 질문과 완전히 관련이있는 것은 아니지만 제가 살펴봤을 때 가장 많이 검색된 결과 중 하나 였으므로 같은 문제를 가진 사람에게 도움이 되길 바랍니다.)


답변