Question

HTML

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

的Javascript

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
    }
  };
} ]);

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

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

https://stackoverflow.com/a/15573493/753632

Answer 1

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));
                });

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

1 个答案: