각도 js 범위 속성이 정의되지 않았습니다.

Question

왜 $ scope.orderBy가 정의되지 않습니까? "테스트"중이십니까?

http://jsfiddle.net/XB4QA/4/

var app = angular.module("Foo", []); 

app.directive("two", function() { 
return { 
    scope: { 
     orderBy: '@' 
    }, 
    restrict: 'E', 
    transclude: true, 
    controller: function ($scope, $element, $attrs) { 
     console.log($scope.orderBy); // is undefined, why? 
    }, 
    template: '<div></div>', 
    replace: true 
}; 
}); 

<div ng-app="Foo"> 
    <two order-by="test">test</two> 
</div> 

Answer 1

@ 바인딩 지침의 범위에서 보간이 보간은 지향성 링크 단계 후에, 나중에 일어난다. 즉, 지시문 템플릿은 바인딩을 사용할 수 있지만 다양한 지시문 구성 메소드에서는 사용할 수 없습니다. 그러나 = 바인딩은 지시문에서 즉시 사용할 수 있으므로 즉시 액세스하려는 경우 이러한 바인딩을 사용하는 것이 좋습니다.

test는 같은 속성 값 주위에 작은 따옴표를 추가로 액세스하려는 리터럴 값 인 경우 :

<two order-by="'test'"> 

또는 test 변수 인 경우 그대로 단지 HTML을두고는. 두 경우 모두, 같은 바인딩을 변경하면 (@의 사용에 의한 경우 것 같다) 문자열 보간을 사용하고자하는 경우에 대한 의견 아제에 의해 언급 한 바와 같이

scope: { 
    orderBy: '=' // = instead of @ 
} 

Answer 2

당신은 $observe를 이용해야한다 현재 허용되는 답변입니다.

또는 orderBy 특성이 항상 리터럴 문자열 인 경우 빈 격리 범위를 만들고 orderBy을 바인딩하지 않을 수 있습니다. 그런 다음 $attrs.orderBy을 사용하여 문자열 값을 가져올 수 있습니다.

잘 작동합니다. 작동

app.directive("two", function() { 
    return { 
    scope: { 
    }, 
    restrict: 'E', 
    transclude: true, 
    controller: function ($scope, $element, $attrs) { 
     console.log($attrs.orderBy); 
    }, 
    template: '<div></div>', 
    replace: true 
    }; 
});