2013-07-29 3 views
1

이 시나리오가 있는데 스크립트를 통해 HTML의 일부분 (AngularJS 지시문이 있음)을 동적으로로드하고 있으며 AngularJS가 활성화되지 않은 것으로 나타납니다.스크립트에서 HTML을로드 할 때 AngularJS가 활성화되지 않음

여기가 내가보고있는 예입니다. 어쨌든 AngularJS에게 문서에 바인딩을 시작할 준비가되었다고 말할 수 있습니까? iframe을 통해이 widget1 콘텐츠가 포함 된 aspx 페이지를로드하는 것은 작동하는 것처럼 보이지만 iframe을 피하고 클라이언트 측 스크립트를 사용하려고합니다. 감사합니다.

<body ng-app> 
main content page 
<br /> 
<!-- widget1 --> 
<b>Widget1</b> 
<div id="widget1"> 
    <!-- load below div via jquery/or any method from a remote html file--> 
    <script type="text/javascript"> 
     $("div#widget1").load("/widgetsfolder/widget1.htm"); 
    </script> 
</div> 

widget.htm 파일 내용 아래에 있습니다.

<div ng-controller="TodoCtrl"> 
     Total todo items: {{getTotalItems()}} 
     <ul class="unstyled"> 
      <li ng-repeat="todo in todos"> 
       <input type="checkbox" ng-model="todo.done" /> 
       <span class="done-{{todo.done}}">{{todo.text}} </span></li> 
     </ul> 
    </div> 

내 컨트롤러 코드.

`function TodoCtrl($scope) { 
    $scope.totalItems = 4; 
    debugger; 
    $scope.todos = [{ 
     text: 'learn angularjs', 
     done: false 
    }, { 
     text: 'implement angularjs', 
     done: false 
    }, { 
     text: 'something else', 
     done: false 
    }, ];

$scope.getTotalItems = function() { return $scope.todos.length; }

} 여기 '

샘플 코드 http://jsfiddle.net/devs/RGfp4/

답변

0

AngularJS와의 범위를 평가하고,이로드 된 후 페이지를 렌더링한다.

여기, 당신의 js 스크립트는 위젯의 HTML을로드하지만 각도가 이미 등 범위

를 컴파일 후 나는이 이런 식으로 작동하지 않습니다 생각합니다.

2

아 페로의 대답은 무슨 일이 일어나고 있는지 설명합니다. ng-include을 사용하고 싶다고 생각합니다.

<body ng-app> 
    main content page 
    <br /> 
    <!-- widget1 --> 
    <b>Widget1</b> 
    <div ng-include="'/widgetsfolder/widget1.htm'"> 
    </div> 
</body> 
0

당신은 외부에서 문서를 가져 angulars ngINclude를 사용할 수 있지만, 그것은 버그가있을 수 있습니다를하지 않는 것이 좋습니다 : 귀하의 HTML은 다음과 같이 보일 것입니다. $ http 또는 $ resource 중 하나를 사용하여 부분 데이터를 가져올 수 있습니다. 그러면 데이터를 가져 와서 내부의 각도 지시문을 컴파일합니다.

다른 방법을 사용하여 스크립트를로드하려는 경우 컨트롤러 내부에 문자열로 데이터를 저장하고 $ compile 지시문을 사용하여 그 안에 각도 코드를 실행할 수 있습니다.

관련 문제