ng-include 범위 초기화

Question

일부 데이터로 ng-include 내부 범위를 초기화해야합니다. 지금까지 ng-include 요소에서 ng-init을 사용하고 있었지만 이렇게하면 평가 된 표현식이 ng-include 부모 범위에 저장되고 두 개의 지시문이 같은 이름을 사용하면 충돌이 발생할 수 있습니다.

<div ng-if="true"> 
     <ng-include src="'/partials/reports/chart'" ng-init="chart=getChartParams()"></ng-include> 
</div> 

를 사용하여 어린이 요소 : 새로운 범위의 생성을 강제로 NG-경우

는 더미 (dummy)를 사용하여 지금이 시도 할 때까지

는이 문제를 해결하는 몇 가지 방법이 있습니다 ng-include 범위를 초기화 :

<ng-include src="'/partials/reports/chart'"> 
         <span ng-init="chart=getChartParams()"></span> 
</ng-include> 

이 솔루션은 기능,하지만 그들은 추한 해킹이야. 더 나은 해결책이 있습니까?

Answer 1

ngInclude 당신이 원하는 것을한다는 onload 속성이 있습니다. ng-init처럼 작동하지만 새로 생성 된 범위에서 작동합니다.

<ng-include src="'/partials/reports/chart'" onload="chart=getChartParams()"> 
</ng-include> 

documentation는 onload이 있지만 사용에 대해 어떠한 지침을 제공하지 않는 "새로운 부분이로드 될 때 평가하는 표현"말한다. 이것이이 속성의 의도 된 사용인지는 모르겠지만 트릭을 수행합니다.

Answer 2

나는이 원래 ngInit을 기반으로, 사용자 정의 지침을 만들어 해결하지만, 한 ngInclude보다 낮은 우선 순위 :

app.directive('init', function() { 
    return { 
     priority: 0, 
     compile: function() { 
      return { 
       pre: function (scope, element, attrs) { 
        scope.$eval(attrs.init); 
       } 
      }; 
     } 
    }; 
}); 

이

당신은 다음과 같이 사용할 수 있습니다 :

<ng-include src="'/partials/reports/chart'" init="chart=getChartParams()"></ng-include> 

init 표현식은 ngInclude 범위가 생성 된 직후, 내부 템플릿의 내용을로드하거나 실행하기 전에 실행됩니다.

Answer 3

또한 이중 중괄호가있는 임의의 특성을 사용하여 범위의 식을 계산할 수 있어야합니다.

<ng-include src="'/partials/reports/chart'" whatever="{{chart=getChartParams()}}"></ng-include>