격리 된 범위로 각도 지시문 템플릿을 렌더링 할 수 있습니까?

Question

격리 된 범위를 사용하여 각도 지시문을 사용하여 이상한 동작이 발생했습니다. 분명히 템플릿은 새 스코프가 아닌 이전 스코프를 사용하여 해결됩니다. 이 지시어의 범위의 '차단'을 위배

이 약간 이상한 소리

HTML :

<div ng-app="myApp"> 
    <div ng-controller="MyController"> 
    out prop = {{prop}} 
    <div my-directive prop="'valueIN'"> 
     in prop = {{prop}} 
    </div> 
    </div> 
</div> 

JS

function MyController($scope) { 
    $scope.prop = 'valueOUT'; 
} 

angular.module('myApp',[]).directive('myDirective', function() { 
    return { 
    scope: { prop: '=' } 
    }; 
}); 

이 출력 :

나에게 이상한 소리

각도 1.1

out prop = valueOUT 
in prop = valueIN 

각도 1.2

out prop = valueOUT 
in prop = valueOUT 

... 또한 템플릿을 transcluding와 같은 동작을 얻었다.

1.2에서 1.1 동작을 얻을 수 있습니까?

대응 바이올린 : https://jsfiddle.net/4s1fxjmq/

Answer 1

한 가지 방법은 적절한 범위에서 요소를 다시 컴파일하는 것입니다

.directive('myDirective', ['$compile', function($compile) { 
    return { 
    scope: { 
     prop: '=' 
    }, 
    link: function(scope, element, attr) { 
     attr.$set('myDirective', null) 
     $compile(element)(scope) 
    } 
    } 
}]) 

이 작동