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

关于如何使用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>

app.controller（'masterController'，['$scope'，函数（$scope）{
$scope.loadOtherHTMLondemandAppenditAfterme=function（）{
/* 
如何加载另一个HTML文件，
这里也包含了相关的脚本，随需应变
*/
};
}]);

现在我明白了很多人可能会大喊你做错了，这不是AngularJS应该如何工作等等，但是我们被困在微服务和mashup web UI的体系结构中，其中加载到浏览器中的模块触发一个事件，说它需要一个功能，另一个正在侦听该事件的模块应按需加载相关功能。URL不会更改，此处不使用路由。

只需在服务中使用a，如下所示：

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等）正常工作。

如果在该模板中有一个控制器与HTML一起注册，该怎么办？因为我得到的

xController不是一个函数，所以在加载此模板时得到了未定义的
：
{{{name}}app.controller（'sampleController'，['$scope'，function（$scope）{$scope.name='Jack'；}]）