Angularjs 在包含指令的指令中添加html

HTML

Javascript

<div show-orders ng-click="showOrderDetails()" ></div>

var-ddApp=angular.module（'ddApp'，[]）；
指令（'showOrders'，[function（$compile）
{
返回{
链接：函数（范围、元素、属性）
{
scope.showOrderDetails=函数（）
{
//我通常如何插入HTML。
元素append（'sometext'）；
//如何在这里使用$compile？？？
//el=$compile（第三方物流）（范围）；
}
}
};
} ]);
指令（'orderDetails'，[function（）
{
返回{
链接：函数（范围、元素、属性）
{
//做点什么
}
};
} ]);

单击div时，将调用showOrderDetails。然后，我想在div中附加一些html（即，将其插入div）。但是，我插入的html是一个div，其中包含另一个名为orderdetails的指令。如何编译此html并将其插入div中，以便Angular知道order details指令

另一个问题。我不确定将html代码直接放在click事件中是否是正确的解决方案。如果我想让它来自某个模板，这样我就可以在其他地方重用该模板了。是否可以从服务或工厂加载html？如果是，怎么做？答案是这样的吗

---

我还添加了一个与此主题相关的附加问题。你也能回答这个问题吗？谢谢

var ddApp = angular.module('ddApp', []);

ddApp.directive('showOrders', [function ($compile)
{
  return {
    link: function (scope, element, attrs)
    {
      scope.showOrderDetails = function ()
      {
        // How I would normally insert HTML.
        element.append('<div order-details>Some text</div>');

        // How do you use $compile here???
        //el = $compile(tpl)(scope);
      }
    }
  };
} ]);

ddApp.directive('orderDetails', [function ()
{
  return {
    link: function (scope, element, attrs)
    {
      // Do something
    }
  };
} ]);

var template='<div order-details>Some text</div>'
element.append($compile(template)(scope));

$http({method: 'GET', url: '/views/template'})
                .success(function(data){
                    element.append($compile(data)(scope));
                });