AngularJS의 지시문 범위에서 '@'과 '='의 차이점은 무엇입니까?

주제에 대한 AngularJS 설명서를주의 깊게 읽은 다음 지시문으로 둘러 보았습니다. 여기 바이올린이 있습니다.

다음은 관련 스 니펫입니다.

• 로부터 HTML :

  <pane bi-title="title" title="{{title}}">{{text}}</pane>

• pane 지시문에서 :

  scope: { biTitle: '=', title: '@', bar: '=' },

내가 얻지 못한 몇 가지가 있습니다.

• 와 함께 사용해야 "{{title}}"하는 이유는 무엇 입니까?'@'"title"'='
• 요소를 속성으로 꾸미지 않고 부모 범위에 직접 액세스 할 수 있습니까?
• 문서에는 "표현식과 부모 범위를 통해 격리 된 범위에서 데이터를 전달하는 것이 바람직하다" 고 말하지만 양방향 바인딩에서도 제대로 작동하는 것 같습니다. 표현 경로가 더 나은 이유는 무엇입니까?

식 솔루션을 보여주는 또 다른 바이올린을 찾았습니다 : http://jsfiddle.net/maxisam/QrCXh/

' @ '와 함께 "{{title}}"을 사용 하고 ' = ' 와 함께 "title" 을 사용해야하는 이유는 무엇 입니까?

@ 는 로컬 / 직접 범위 속성을 DOM 특성 의 평가 된 값에 바인딩 합니다 . 당신이 사용하는 경우 title=title1또는 title="title1", DOM 속성 "제목"의 가치는 단순히 문자열입니다 title1. 를 사용 title="{{title}}"하면 DOM 속성 "title"의 값이 보간 된 값이 {{title}}되므로 문자열은 현재 "parent"상위 범위 속성 인 "title"이 설정됩니다. 속성 값은 항상 문자열이므로 @ 사용시 지시문 범위에서이 속성에 대한 문자열 값으로 끝나게됩니다 .

= 는 로컬 / 직접 범위 속성을 부모 범위 속성에 바인딩 합니다 . 따라서 = 를 사용하면 부모 모델 / 범위 속성 이름을 DOM 속성 값으로 사용합니다. ={{}} 와 함께 s를 사용할 수 없습니다 .

@를 사용하면 title="{{title}} and then some"{{title}}이 보간 된 다음 문자열 "and some"이 연결됩니다. 마지막으로 연결된 문자열은 로컬 / 직접 범위 속성이 얻는 것입니다. ( = 로만 수행 할 수 있으며 @ 만 사용할 수 있습니다 .)

로 @ , 당신은 사용해야합니다 attr.$observe('title', function(value) { ... })당신이 당신의 링크 (보내고) 함수의 값을 사용해야하는 경우. 예를 들어, if(scope.title == "...")예상대로 작동하지 않습니다. 이것은이 속성을 비동기 적으로 만 액세스 할 수 있음을 의미합니다 . 템플릿의 값만 사용하는 경우 $ observe ()를 사용할 필요가 없습니다. 예, template: '<div>{{title}}</div>'.

로 = , 당신은 관찰 $를 사용할 필요가 없습니다.

요소를 속성으로 꾸미지 않고 부모 범위에 직접 액세스 할 수 있습니까?

예.하지만 격리 범위를 사용하지 않는 경우에만 가능합니다. 지시문에서이 줄을 제거하십시오

scope: { ... }

그리고 당신의 지시는 새로운 범위를 만들지 않을 것입니다. 부모 범위를 사용합니다. 그런 다음 모든 상위 범위 속성에 직접 액세스 할 수 있습니다.

설명서에는 "표현식과 부모 범위를 통해 격리 된 범위에서 데이터를 전달하는 것이 바람직하다"고 말하지만 양방향 바인딩에서도 제대로 작동하는 것 같습니다. 표현 경로가 더 나은 이유는 무엇입니까?

예, 양방향 바인딩을 통해 로컬 / 직접 범위와 상위 범위가 데이터를 공유 할 수 있습니다. "표현식 바인딩"을 사용하면 지시문이 DOM 속성으로 정의 된 표현식 (또는 함수)을 호출 할 수 있으며 표현식 또는 함수에 데이터를 인수로 전달할 수도 있습니다. 따라서 부모와 데이터를 공유 할 필요가없는 경우 부모 범위에 정의 된 함수를 호출하기 만하면 & 구문을 사용할 수 있습니다 .

또한보십시오

• Lukas의 격리 된 스코프 블로그 게시물 (@, =, & 포함)
• @와 = 의 dnc253의 설명
• 범위에 대한 내 블로그와 같은 답변 - 지시문 섹션 (요약 섹션 바로 전에 맨 아래에 있음)에는 격리 범위와 상위 범위의 그림이 있습니다-지시문 범위는 한 속성에 @를 사용하고 다른 속성에 =를 사용합니다
• AngularJS에서 & vs @와 =의 차이점은 무엇입니까?

이 큰 응답의 많은 현재 위치,하지만 난 사이의 차이점에 대한 나의 관점을 제공하고 싶습니다 @, =그리고 &바인딩 나를 위해 유용한 입증하는.

세 가지 바인딩은 모두 요소의 속성을 통해 부모 범위에서 지시문의 격리 된 범위로 데이터를 전달하는 방법입니다.

1. @ 바인딩은 문자열을 전달하기위한 것입니다. 이 문자열 {{}}은 보간 된 값에 대한 표현식을 지원 합니다. 예를 들면 다음과 같습니다.. 보간 된 표현식은 지시문의 상위 범위에 대해 평가됩니다.

2. = 바인딩은 양방향 모델 바인딩을위한 것입니다. 부모 범위의 모델은 지시문의 격리 된 범위의 모델에 연결됩니다. 한 모델을 변경하면 다른 모델에도 영향을 미치며 그 반대도 마찬가지입니다.

3. & 바인딩은 지시문 내에서 메소드를 호출하여 지시문 내에서 호출 할 수 있도록합니다. 이 메소드는 지시문의 상위 범위에 미리 바인딩되어 있으며 인수를 지원합니다. 예를 들어, 메소드가 상위 범위에서 hello (name) 인 경우 지시문 내에서 메소드를 실행하려면 $ scope.hello ({name : 'world'})를 호출해야합니다.

더 짧은 설명으로 범위 바인딩을 참조하여 이러한 차이점을 기억하는 것이 더 쉽다는 것을 알았습니다.

• @ 속성 문자열 바인딩
• = 양방향 모델 바인딩
• & 콜백 메소드 바인딩

또한 기호는 지시문 구현 내에서 scope 변수가 무엇을 나타내는 지 더 명확하게 만듭니다.

• @ 끈
• = 모델
• & 방법

유용성을 위해 (어쨌든 나를 위해) :

1. =
2. @
3. &

=수단 양방향 결합하므로 상위 범위에 변수에 대한 참조. 즉, 지시문에서 변수를 변경하면 부모 범위에서도 변수가 변경됩니다.

@ 변수가 지시문에 복사 (복제)됨을 의미합니다.

내가 아는 한 <pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>작동해야합니다. bi-title지시어에서 변경 될 수있는 부모 범위 변수 값을받습니다.

부모 범위에서 여러 변수를 변경해야하는 경우 지시문 내에서 부모 범위의 함수를 실행하거나 서비스를 통해 데이터를 전달할 수 있습니다.

이것이 실제 예제와 어떻게 작동하는지 더 자세히보고 싶다면 http://jsfiddle.net/juanmendez/k6chmnch/

var app = angular.module('app', []);
app.controller("myController", function ($scope) {
    $scope.title = "binding";
});
app.directive("jmFind", function () {
    return {
        replace: true,
        restrict: 'C',
        transclude: true,
        scope: {
            title1: "=",
            title2: "@"
        },
        template: "<div><p>{{title1}} {{title2}}</p></div>"
    };
});

@ 끈으로 얻다

• 이것은 어떤 바인딩도 생성하지 않습니다. 전달한 단어를 단순히 문자열로 가져옵니다.

= 양방향 바인딩

• 컨트롤러의 변경 사항은 지침에 의해 보유 된 참조에 반영되며 그 반대도 마찬가지입니다.

&스코프 는 전달 된 객체를 반환 하는 함수를 가져 오기 때문에 약간 다르게 동작합니다 . 이것이 작동하려면 이것이 필요하다고 가정합니다. 바이올린은 이것을 분명히해야합니다.

• 이 getter 함수를 호출 한 후 결과 객체는 다음과 같이 동작합니다.
  • 기능 이라면 전달 하였다 호출되면 그 함수는 상위 (컨트롤러) 클로저에서 실행된다
  • 함수 가 전달 되지 않은 경우 : 바인딩이없는 오브젝트의 로컬 사본을 가져 오십시오.

이 바이올린은 어떻게 작동하는지 보여 주어야합니다 . get...내가 의미하는 바를 더 잘 이해하기 위해 이름에 스코프 기능에 특별한주의를 기울이십시오.&

지시문에 범위를 추가 할 수있는 세 가지 방법이 있습니다.

1. 부모 범위 : 이것은 기본 범위 상속입니다.

지시어와 그 부모 (내부 컨트롤러 / 지시자) 범위는 동일합니다. 따라서 지시문 내의 범위 변수에 대한 변경 사항은 상위 컨트롤러에도 반영됩니다. 기본값이므로이를 지정할 필요가 없습니다.

2. 하위 범위 : 지정 문은 지정 문의 범위 변수를 true로 지정하면 상위 범위에서 상속되는 하위 범위를 작성합니다.

여기서 지시문 내에서 범위 변수를 변경하면 부모 범위에 반영되지 않지만 범위 변수의 속성을 변경하면 실제로 부모의 범위 변수를 수정 한 것처럼 부모 범위에 반영됩니다 .

예,

app.directive("myDirective", function(){

    return {
        restrict: "EA",
        scope: true,
        link: function(element, scope, attrs){
            scope.somvar = "new value"; //doesnot reflect in the parent scope
            scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
        }
    };
});

3. 격리 된 범위 : 컨트롤러 범위에서 상속되지 않는 범위를 만들려고 할 때 사용됩니다.

이것은 플러그인을 만들 때 발생합니다. 지시문은 HTML에 배치 할 수 있고 부모 범위의 영향을받지 않기 때문에 일반적입니다.

이제 상위 범위와 상호 작용하지 않으려면 범위를 빈 개체로 지정할 수 있습니다. 처럼,

scope: {} //this does not interact with the parent scope in any way

부모 범위와의 상호 작용이 필요하기 때문에 대부분의 경우가 아니므로 일부 값 / 변경 사항이 통과되기를 원합니다. 이러한 이유로 다음을 사용합니다.

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

@ 는 컨트롤러 범위의 변경 사항이 지시문 범위에 반영되지만 지시문 범위의 값을 수정해도 컨트롤러 범위 변수는 영향을받지 않습니다.

@는 항상 매핑 된 속성이 표현식 일 것으로 예상합니다. 이건 매우 중요합니다; "@"접두사가 작동하게하려면 속성 값을 {{}} 안에 래핑해야합니다.

= 는 양방향이므로 지시문 범위에서 변수를 변경하면 컨트롤러 범위 변수도 영향을받습니다.

& 는 컨트롤러 범위 메소드를 바인드하여 필요한 경우 지시문에서 메소드를 호출 할 수 있습니다.

여기서 이점은 변수의 이름이 컨트롤러 범위와 지시문 범위에서 동일 할 필요가 없다는 것입니다.

예를 들어, 지시문 범위에는 컨트롤러 범위의 "contVar"변수와 동기화되는 "dirVar"변수가 있습니다. 이는 하나의 컨트롤러가 변수 v1과 동기화 할 수 있고 동일한 명령어를 사용하는 다른 컨트롤러가 dirVar에게 변수 v2와 동기화하도록 요청할 수 있으므로 명령어에 많은 힘과 일반화를 제공합니다.

아래는 사용법의 예입니다.

지시문 및 컨트롤러는 다음과 같습니다.

 var app = angular.module("app", []);
 app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    };
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        },
        link: function(element, scope, attrs){
           //do something like
           $scope.reverse(); 
          //calling the controllers function
        }
    };
});

그리고 html (@과 =의 차이점에 유의하십시오) :

<div my-directive
  class="directive"
  name="{{name}}"
  reverse="reverseName()"
  color="color" >
</div>

다음은 블로그를 잘 설명 하는 링크 입니다.

간단히 사용할 수 있습니다 :-

1. @ :-단방향 데이터 바인딩을위한 문자열 값입니다. 한 가지 방법으로 데이터 바인딩은 범위 값만 지시문에 전달할 수 있습니다.

2. 양방향 데이터 바인딩을위한 객체 값의 경우 = :- 양방향 데이터 바인딩에서는 지시문뿐만 아니라 html에서도 범위 값을 변경할 수 있습니다.

3. & :-메소드와 함수

편집하다

우리의에서 구성 요소 에 대한 정의 각도 버전 1.5 이상
바인딩의 네 가지 유형이 있습니다 :

1. = 양방향 데이터 바인딩 :-값을 변경하면 자동으로 업데이트됩니다.

2. < 단방향 바인딩 :-부모 범위에서 매개 변수를 읽고 업데이트하지 않으려는 경우.

3. @이것은 문자열 매개 변수입니다

4. &이것은 컴포넌트가 부모 스코프에 무언가를 출력해야 할 경우를 위한 콜백 입니다

나는 Angular 코드를 포함하는 작은 HTML 파일을 만들어 그 사이의 차이점을 보여주었습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as VM">
      <a my-dir
        attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
        attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
        attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
      ></a>
    </div>
    <script>
    angular.module("myApp", [])
    .controller("myCtrl", [function(){
      var vm = this;
      vm.sayHi = function(name){
        return ("Hey there, " + name);
      }
    }])
    .directive("myDir", [function(){
      return {
        scope: {
          attr1: "=",
          attr2: "@",
          attr3: "&"
        },
        link: function(scope){
          console.log(scope.attr1);   // =, logs "Hey there, Juan"
          console.log(scope.attr2);   // @, logs "VM.sayHi('Juan')"
          console.log(scope.attr3);   // &, logs "function (a){return h(c,a)}"
          console.log(scope.attr3()); // &, logs "Hey there, Juan"
        }
      }
    }]);
    </script>
  </body>
</html>

= 방법은 바인딩 2 웨이 당신이 할 수 있습니다, 라이브 귀하의 지시어 내부 변경. 누군가가 변수를 지시문 밖에서 변경하면 지시문 내부에서 데이터가 변경되지만 @ way는 양방향 바인딩 이 아닙니다 . Text 처럼 작동합니다 . 한 번만 묶으면 그 가치 만 갖게됩니다.

더 명확하게하기 위해이 위대한 기사를 사용할 수 있습니다.

AngularJS 지시어 범위 '@'및 '='

이 질문은 이미 치러졌지만 AngularJS 스코프 인 끔찍한 혼란으로 어려움을 겪고있는 누군가를 위해 이것을 공유 할 것입니다. 이 의지 커버 =, <, @, &와 ::. 전체 기록은 여기 에서 찾을 수 있습니다 .

=양방향 바인딩을 설정합니다. 부모의 재산을 변경하면 자녀가 변경되고 그 반대도 마찬가지입니다.

<편도 바인딩, 부모와 자식을 설정합니다. 부모의 속성을 변경하면 자식이 변경되지만 자식 속성을 변경해도 부모 속성에 영향을 미치지 않습니다.

@하위 속성에 태그 속성의 문자열 값을 할당합니다. 속성에 expression이 포함되어 있으면 표현식 이 다른 문자열로 평가 될 때마다 자식 속성이 업데이트됩니다. 예를 들면 다음과 같습니다.

<child-component description="The movie title is {{$ctrl.movie.title}}" />

bindings: {
    description: '@', 
}

여기서 description자식 범위 의 속성은 expression의 현재 값이되며 "The movie title is {{$ctrl.movie.title}}"여기서 movie부모 범위의 개체입니다.

&약간 까다 롭고 실제로 그것을 사용해야 할 강력한 이유가없는 것 같습니다. 하위 범위의 변수로 매개 변수를 대체하여 상위 범위의 표현식을 평가할 수 있습니다. 예 ( plunk ) :

<child-component 
  foo = "myVar + $ctrl.parentVar + myOtherVar"
</child-component>

angular.module('heroApp').component('childComponent', {
  template: "<div>{{  $ctrl.parentFoo({myVar:5, myOtherVar:'xyz'})  }}</div>",
  bindings: {
    parentFoo: '&foo'
  }
});

주어진 parentVar=10경우 표현식 parentFoo({myVar:5, myOtherVar:'xyz'})은 다음 5 + 10 + 'xyz'과 같이 평가되고 컴포넌트는 다음과 같이 렌더링됩니다.

<div>15xyz</div>

이 복잡한 기능을 언제 사용하고 싶습니까? &사람들이 종종 부모 범위의 콜백 함수를 자식 범위로 전달하기 위해 사용합니다. 그러나 실제로는 함수를 전달하기 위해 '<'를 사용하여 동일한 효과를 얻을 수 있습니다.이 방법은 더 간단하고 매개 변수를 전달하기 위해 어색한 중괄호 구문을 피합니다 ( {myVar:5, myOtherVar:'xyz'}). 치다:

다음을 사용하는 콜백 &:

<child-component parent-foo="$ctrl.foo(bar)"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo({bar:'xyz'})">Call foo in parent</button>',
  bindings: {
    parentFoo: '&'
  }
});

다음을 사용하는 콜백 <:

<child-component parent-foo="$ctrl.foo"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo('xyz')">Call foo in parent</button>',
  bindings: {
    parentFoo: '<'
  }
});

개체 (및 배열)는 복사되지 않고 자식 범위를 참조하여 전달됩니다. 이것이 의미하는 것은 단방향 바인딩 인 경우에도 부모 및 자식 범위에서 동일한 개체로 작업하고 있다는 것입니다.

작동하는 다른 접두사를 보려면이 plunk를 엽니 다 .

[공식 문서]
이후 버전의 AngularJS에는 한 번만 바인딩하는 옵션이 도입되어 자식 범위 속성이 한 번만 업데이트됩니다. 부모 속성을 볼 필요가 없어 성능이 향상됩니다. 구문은 위와 다릅니다. 일회용 바인딩을 선언 ::하려면 component 태그 의 표현식 앞에 추가하십시오 .

<child-component 
  tagline = "::$ctrl.tagline">
</child-component>

이는 tagline단방향 또는 양방향 바인딩을 설정하지 않고 하위 범위에 값을 전파합니다 . 참고 : tagline처음 undefined에 부모 범위에있는 경우 angular는 변경 될 때까지 그것을보고 자식 범위에서 해당 속성을 한 번 업데이트합니다.

요약

아래 표는 속성이 객체, 배열, 문자열 등인지에 따라 접두사가 작동하는 방식을 보여줍니다

@ local scope 속성은 지시문 외부에 정의 된 문자열 값에 액세스하는 데 사용됩니다.

= 외부 범위와 지시문의 격리 범위 사이에 양방향 바인딩을 만들어야하는 경우 = 문자를 사용할 수 있습니다.

& local scope 속성을 사용하면 지시문 소비자가 지시문이 호출 할 수있는 함수를 전달할 수 있습니다.

아래 링크를 확인하여 예제를 명확하게 이해하십시오. 공유하는 것이 정말 유용하다는 것을 알았습니다.

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

예제와 같이 범위가 로컬 인 경우에도 property를 통해 상위 범위에 액세스 할 수 있습니다 $parent. 아래 코드 title에서 상위 범위에 정의되어 있다고 가정하십시오 . 그런 다음 제목으로 다음과 같이 액세스 할 수 있습니다 $parent.title.

link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"

그러나 대부분의 경우 속성을 사용하여 동일한 효과를 얻는 것이 좋습니다.

"표현식을 통해 격리 된 범위에서 부모 범위로 데이터를 전달하는 데 사용되는" "&"표기법을 찾은 예는 유용하며 양방향 데이터 바인딩을 사용할 수 없습니다. ng-repeat 내부에 특수 데이터 구조를 렌더링합니다.

<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>

렌더링의 한 부분은 삭제 버튼이었으며 여기서는 &를 통해 외부 범위에서 삭제 기능을 첨부하는 것이 유용했습니다. 렌더 지시어 안에서는

scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"

data = "="삭제 기능이 모든 $digest사이클에서 실행될 때처럼 양방향 데이터 바인딩을 사용할 수 없습니다 . 레코드가 즉시 삭제되고 렌더링되지 않기 때문에 좋지 않습니다.

가능한 모든 옵션을 바이올린으로 구현했습니다.

모든 옵션을 처리합니다.

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

그들 사이의 주요 차이점은 단지

@ Attribute string binding
= Two-way model binding
& Callback method binding

@과 =다른 답변을 참조하십시오.

하나 개 잡았다 대해 DR, TL; 부모로부터 식 (다른 답변의 예와 같은 기능뿐만 아니라)을 가져 와서 지시문의 함수로 설정하여 식을 호출합니다. 그리고이 함수는 객체를 변수와 함께 전달하여 표현식의 모든 변수 (함수 이름조차) 를 바꿀 수 있습니다. &

&

설명
& 은 표현식 참조입니다. 즉 <myDirective expr="x==y"></myDirective>
, 지시문에서 와 같은 것을 전달 expr하면 함수와 같이 표현식을 호출하는 함수가됩니다
function expr(){return x == y}.
지시어의 html <button ng-click="expr()"></button>에서 표현식을 호출합니다. 지시문의 js에서는 $scope.expr()표현식도 호출합니다.
표현식은 부모의 $ scope.x 및 $ scope.y와 ​​함께 호출됩니다.
매개 변수를 대체 할 수 있습니다!
예 <button ng-click="expr({x:5})"></button>
를 들어 호출로 설정하면 매개 변수 x및 부모의 매개 변수를 사용하여 표현식이 호출됩니다 y.
둘 다 재정의 할 수 있습니다.
이제 왜 <button ng-click="functionFromParent({x:5})"></button>작동 하는지 알 수 있습니다.
그것은 단지 부모의 표현을 호출하기 때문에<myDirective functionFromParent="function1(x)"></myDirective>)이며 가능한 경우 지정된 매개 변수로 대체합니다 (이 경우x .
그것은 수 :
<myDirective functionFromParent="function1(x) + 5"></myDirective>
또는
<myDirective functionFromParent="function1(x) + z"></myDirective>
아이의 호출로 :
<button ng-click="functionFromParent({x:5, z: 4})"></button>.
또는 기능 교체시 :
<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>.

그것은 단지 표현 일뿐, 그것이 함수인지, 많은 함수인지, 또는 비교인지는 중요하지 않습니다. 이 표현식의 모든 변수를 바꿀 수 있습니다 .

예제 :
지시문 템플릿과 호출 된 코드 :
부모가 $ scope.x, $ scope.y를 정의했습니다.
부모 템플릿 : <myDirective expr="x==y"></myDirective>
<button ng-click="expr()"></button>호출 $scope.x==$scope.y
<button ng-click="expr({x: 5})"></button>호출 5 == $scope.y
<button ng-click="expr({x:5, y:6})"></button>호출5 == 6

부모가 $ scope.function1, $ scope.x, $ scope.y를 정의했습니다 :
부모 템플릿 :<myDirective expr="function1(x) + y"></myDirective>

<button ng-click="expr()"></button>통화 $scope.function1($scope.x) + $scope.y
<button ng-click="expr({x: 5})"></button>통화 $scope.function1(5) + $scope.y
<button ng-click="expr({x:5, y:6})"></button>통화 $scope.function1(5) + 6
지시어는 함수로 $ scope.myFn 있습니다
<button ng-click="expr({function1: myFn, x:5, y:6})"></button> 전화를$scope.myFn(5) + 6

'@'에 "{{title}}"을, "="에 "title"을 사용해야하는 이유는 무엇입니까?

{{title}}을 사용하면 상위 범위 값만 지시문보기로 전달되어 평가됩니다. 이는 한 가지 방식으로 제한되므로 변경 사항이 상위 범위에 반영되지 않습니다. 하위 지시문에서 수행 된 변경 사항을 상위 범위에 반영하려는 경우 '='를 사용할 수 있습니다. 이것은 양방향입니다.

요소를 속성으로 꾸미지 않고 부모 범위에 직접 액세스 할 수 있습니까?

지시문에 범위 속성이 있으면 (scope : {}) 더 이상 상위 범위에 직접 액세스 할 수 없습니다. 그러나 여전히 scope. $ parent 등을 통해 액세스 할 수 있습니다. 지시문에서 범위를 제거하면 직접 액세스 할 수 있습니다.

설명서에는 "표현식과 부모 범위를 통해 격리 된 범위에서 데이터를 전달하는 것이 바람직하다"고 말하지만 양방향 바인딩에서도 제대로 작동하는 것 같습니다. 표현 경로가 더 나은 이유는 무엇입니까?

상황에 따라 다릅니다. 데이터로 식 또는 함수를 호출하려면 &를 사용하고 데이터를 공유하려면 '='를 사용하여 입찰 방식을 사용할 수 있습니다.

아래 링크에서 지시문에 데이터를 전달하는 여러 가지 방법의 차이점을 찾을 수 있습니다.

AngularJS – 격리 된 범위 – @ vs = vs &

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ 속성 문자열 바인딩 (단방향) = 양방향 모델 바인딩 및 콜백 메소드 바인딩

@는 로컬 / 직접 범위 속성을 DOM 특성의 평가 된 값에 바인딩합니다. =는 로컬 / 직접 범위 속성을 부모 범위 속성에 바인딩합니다. & 바인딩은 지시문 내에서 메소드를 호출하여 지시문 내에서 호출 할 수 있도록합니다.

@ 속성 문자열 바인딩 = 양방향 모델 바인딩 및 콜백 메소드 바인딩