Question

有很多关于如何使用AngularJS路由动态加载HTML和脚本的示例。我的情况不同，我找不到怎么做。

假设此代码已加载到浏览器中：

<div ng-controller='masterController'>
    <button ng-click='loadOtherHtmlOnDemandAndAppendItAfterMe'></button>
</div>
<script>
    app.controller('masterController', ['$scope', function($scope){
        $scope.loadOtherHtmlOnDemandAndAppendItAfterMe = function() {
            /* 
              how can I load another HTML file,
              that contains it's related script too here, on-demand
            */
        };
    }]);
</script>

现在我明白很多人现在可能会大喊“你做错了，这不是AngularJS应该如何工作，而且还有什么东西，但我们却陷入了微观架构的困境中服务和mashup Web UI，其中加载到浏览器中的模块触发事件表明它需要功能，而另一个正在侦听该事件的模块应该按需加载相关功能。 URL不会更改，此处不使用路由。

Answer 1

只需使用templateCache compile服务即可：

app.controller('masterController', ['$scope', '$compile', '$templateCache', function($scope, $compile, $templateCache){
   $scope.loadOtherHtmlOnDemandAndAppendItAfterMe = function() {
      var template = $compile($templateCache.get('yourHTMLFile.html'))($scope);

      angular.element('div').append(template); //append your compiled element wherever you want
   }
}]);

简而言之：templateCache是一种轻松抓取HTML文件/脚本并包装在变量中的服务，$ compile允许所有动态行为起作用（角度绑定，javascript等）。

如何在AngularJS中按需加载HTML片段？

1 个答案: