在AJAX加载ngApp后加载ngController_Ajax_Angularjs

在AJAX加载ngApp后加载ngController

ajax angularjs

在AJAX加载ngApp后加载ngController,ajax,angularjs,Ajax,Angularjs,假设我有一个简单的html文件，其中加载了Angular.js和JQuery <body ng-app="myApp"> <div id="#subPage"></div> <button type="button" onclick="loadSubPage()" /> </body> <script> var myModule = Angular.module('myApp',[]); fu

假设我有一个简单的

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>

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

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

您添加的html代码是您的用户不知道的。您需要在外部更改DOM元素后运行compile。您的代码应该是这样的（这是juse pseudo-您需要注入$compile并拥有一个作用域）：


var myModule=Angular.module（'myApp'，[]）；
函数onclick（）{
$.get（'somewhere/aPage.html'，函数（d、s、j）{
$（“#子页”）.html（d）；
$compile（$（“#子页”）（范围）；
});
}

为什么不使用指令如：

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


var myModule=Angular.module（'myApp'，[]）；
指令（“loadSubPage”，function（））{
返回{
链接：功能（范围、元素、属性）{
元素绑定（“单击”，函数（）{
$.get（'somewhere/aPage.html'，函数（d、s、j）{
作用域$apply（函数（）{
$（“#子页”）.html（d）；
});
});
})
}
}
});

您希望使用jQuery来完成此任务的具体原因是什么？我认为在大多数情况下，简单地利用Angular提供的功能更有意义。是的，确实有！不幸的是，这不是我的决定，我不能改变它，一些愚蠢的组织规则…看起来这个解决方案不起作用。至少有一家公司可以让它运作起来。在内部，Angular的$apply（）函数触发$digest（）方法——因此，所有的监视侦听器都被触发，并且生成的输出HTML能够反映当前的模型数据。但是，任何带有Ajax数据的控制器都不会注册。这就是我的问题…这段代码只有在添加了

scope.$apply（）之后才开始工作紧跟在$compile（$（“#子页面”）（范围）之后
<script>
var myModule = Angular.module('myApp',[]);
function onclick() {
    $.get('somewhere/aPage.html', function (d,s,j) {
        $("#subPage").html(d);
         $compile($("#subPage"))(scope);
    });
}

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