AngularJS : 컨트롤러에서 보간 될 지시문에 대한 변수 전달

Question

컨트롤러의 변수를 지시문에 전달하여 지시문의 템플릿에 넣을 수 있습니다. 이 같은 템플릿

app.directive('alert', function() { 
return { 
    restrict: "E", 
    replace: true, 
    transclude: true, 
    templateUrl: "partials/templates/alert.html", 
    link: function(scope, element, attrs) { 
     scope.type = attrs.type; 
    } 
}; 
}); 

:

나는 지시문과 같이이

<div class="alert alert-{{type}}"> 
    <strong ng-if="type">{{type | capitalize}}:</strong> <span ng-transclude></span> 
</div> 

다음과 같이 나는 지시어를 사용 :

<alert ng-show="alert.message" type="{{alert.type}}">{{alert.message}}</alert> 

내 Ctrl 키가있다 변수는 다음과 같습니다.

$scope.alert = { 
    type: 'success', 
    message: 'alert message' 
} 

지시문의 scope.type은 템플릿에서 '{{alert.type}}'문자열로 표시되는데, 단순히 문자열 'success'로 표시되기를 바랍니다.

내가 좋아하는 지시어에게 분리 범위를 제공 시도한 다음 있기 때문에

scope: { 
    type: '@' 
} 

하지만 실패 HTML에서 ng-show="alert.message (존재하는 경우에 true를 반환하지 않습니다, 그래서 지시자가 표시되지 않습니다) 지시어가 ctrl의 범위에 액세스하지 못했습니다.

이 변수를 컨트롤러에서 지시문으로 전달하고 보간하는 올바른 방법은 무엇입니까?

Answer 1

거미줄이나 피들이가 도움이되었을 것입니다. 것은 너무 고립 된 범위없이 일해야한다. 지시어 html 태그 외부에서 ng-show를 이동하고 type 속성 use 표현식을 {{}}없이 사용하는 것이 좋습니다. 이 같은 것

<span ng-show="alert.message"> 
<alert type="alert.type">{{alert.message}}</alert> 
</span> 

그런 다음 격리 된 범위 접근 방식을 사용하십시오.