2013-07-29 61 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

Apero的答案描述了正在發生的事情。我相信你會想要使用ng-include。你的HTML會是這個樣子:

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

您可以使用angulars ngINclude獲取外界文件,但我不認爲它,它可能是馬車。您可以使用$ http或$ resource獲取partials,這將獲取數據並編譯內部的角度指令。

如果要使用其他方法加載腳本,可以將數據作爲字符串存儲在控制器中,並使用$ compile指令來執行其中的角碼。