사용자 지정 지시문의 범위 바인딩에서 기호 '@', '&', '='및 '>'사용 : 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는 해당 지시문에 대한 새 범위를 만듭니다. 즉, 지시문 범위에 대한 변경 사항은 상위 컨트롤러에 다시 반영되지 않습니다.

---

< 단방향 바인딩

= 양방향 바인딩

& 함수 바인딩

@ 문자열 만 전달

---

When we create a customer directive, the scope of the directive could be in Isolated scope, It means the directive does not share a scope with the controller; both directive and controller have their own scope. However, data can be passed to the directive scope in three possible ways.

1. Data can be passed as a string using the @ string literal, pass string value, one way binding.
2. Data can be passed as an object using the = string literal, pass object, 2 ways binding.
3. Data can be passed as a function the & string literal, calls external function, can pass data from directive to controller.

---

The AngularJS documentation on directives is pretty well written for what the symbols mean.

To be clear, you cannot just have

scope: '@'

in a directive definition. You must have properties for which those bindings apply, as in:

scope: {
    myProperty: '@'
}

I strongly suggest you read the documentation and the tutorials on the site. There is much more information you need to know about isolated scopes and other topics.

Here is a direct quote from the above-linked page, regarding the values of scope:

The scope property can be true, an object or a falsy value:

• falsy: No scope will be created for the directive. The directive will use its parent's scope.

• true: A new child scope that prototypically inherits from its parent will be created for the directive's element. If multiple directives on the same element request a new scope, only one new scope is created. The new scope rule does not apply for the root of the template since the root of the template always gets a new scope.

• {...} (an object hash): A new "isolate" scope is created for the directive's element. The 'isolate' scope differs from normal scope in that it does not prototypically inherit from its parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope.

^{Retrieved 2017-02-13 from https://code.angularjs.org/1.4.11/docs/api/ng/service/$compile#-scope-, licensed as CC-by-SA 3.0}

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