負載ngController ngApp由AJAX

加載之後就假設我有一個簡單html文件，Angular.js和JQuery加載負載ngController ngApp由AJAX

<body ng-app="myApp"> 
    <div id="#subPage"></div> 
    <button type="button" onclick="loadSubPage()" /> 
</body> 
<script> 
    var myModule = Angular.module('myApp',[]); 
    function onclick() { 
     $.get('somewhere/aPage.html', function (d,s,j) { 
      $("#subPage").html(d); 
     }); 
    } 
</script>

和我somewhere/aPage.html是這樣的：

<div ng-controller="blahCtrl"> 
    <span>{{message}}</span> 
</div> 
<script> 
    myModule.controller('blahCtrl', function($scope) { 
     console.log('This Is Not Printed Even!!!'); 
     $scope.message = 'The blah!'; 
    }); 
</script>

正如你看到的，點擊按鈕後，我想加載我的子頁面，沒關係！但它似乎控制器不運行。因爲消息不在控制檯中打印。

有什麼問題？爲什麼這根本不起作用？我做錯了什麼？

來源

2015-10-18 Hamed Zakery Miab

是否有一個特定的原因，你爲什麼要使用jQuery來完成這個？我認爲在大多數情況下，僅僅利用Angular提供的內容會更有意義。 – jnishiyama

是的確實存在！不幸的是，這不是我的決定，我不能改變它，一些組織愚蠢的規則... –

您正在添加您的angular未知的html代碼。您需要在外部更改DOM元素後運行編譯，請參閱$compile。你的代碼應該是這樣的（這是JUSE僞 - 你需要注入$編譯並有一個範圍）：

<script> 
var myModule = Angular.module('myApp',[]); 
function onclick() { 
    $.get('somewhere/aPage.html', function (d,s,j) { 
     $("#subPage").html(d); 
     $compile($("#subPage"))(scope); 
    }); 
}

來源

2015-10-18 06:52:57

這個代碼只有在'$ compile（$（「＃subPage」））之後添加'scope。$ apply（）;'後纔開始工作。）（範圍）;' –

爲什麼你不使用指令，如：

<body ng-app="myApp"> 
    <div id="#subPage"></div> 
    <button type="button" load-sub-page/> 
</body> 
<script> 
    var myModule = Angular.module('myApp',[]); 
    myModule.directive("loadSubPage", function(){ 
     return{ 
     link : function(scope, ele, attr){ 
      ele.bind("click", function(){ 
       $.get('somewhere/aPage.html', function (d,s,j) { 
        scope.$apply(function(){ 
         $("#subPage").html(d); 
        }); 
       }); 
      }) 
      } 
     } 
    }); 
</script>

來源

2015-10-18 08:59:11 Sandeep

很棒！ –

看起來像這個解決方案不起作用。至少可以讓它工作。內部Angular的$ apply（）函數觸發$ digest（）方法 - 因此，所有監視偵聽器都被觸發，並且結果輸出的HTML能夠反映當前的模型數據。但是，任何通過Ajax數據傳遞的控制器都未註冊。這對我來說是個問題... –

負載ngController ngApp由AJAX

回答

相關問題