Question

假设我有一个简单的html文件加载了Angular.js和JQuery

<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>

如你所见，我想在点击按钮后加载我的子页面，没关系！但似乎控制器没有运行。因为消息未在控制台中打印。

有什么问题？为什么这根本不起作用？我做错了什么？

Answer 1

您正在添加您的角度不知道的html代码。在外部更改DOM元素后需要运行编译，请参阅$compile。你的代码应该是这样的（这是juse伪 - 你需要注入$ compile并有一个范围）：

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

Answer 2

为什么不使用指令，如：

<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>

在AJAX加载ngApp之后加载ngController

2 个答案: