插入指令到DOM使用jqlite

问题描述

我需要使用jqlite来插入指令的HTML，但由于某些原因，指令不插入模板。

I need to use jqlite to insert the HTML for the directive, but for some reason the directive does not insert the template.

<div ng-app="docsSimpleDirective">
  <div ng-controller="Controller">
      <button ng-click="showCustomer($event)">click to see the customer</button>
  <div>
</div>

和我app.js如下：

And my app.js looks like:

angular.module('docsSimpleDirective', [])
       .controller('Controller', ['$scope', function ($scope) {

          $scope.customer = {
             name: 'Naomi',
             address: '1600 Amphitheatre'
          };

          $scope.showCustomer = function($event) {
             angular.element($event.currentTarget).next().html("<div my-customer></div>");
          };
       }])
       .directive('myCustomer', function () {
          return {
          template: 'Name: {{customer.name}} Address: {{customer.address}}'
       };
});

请注意：这只是尝试和重建我在局面，但该指令必须插入到DOM类似的方式上面 - 否则它不会对我的情况下工作。

NOTE: This is just to try and recreate the situation i'm in, but the directive has to be inserted to the DOM in a similar way to the above - otherwise it will not work for my situation.

推荐答案

至于Michelem提做DOM操作使用指令的最佳途径。

As Michelem mention the best way to do DOM manipulation is using directive.

如果你仍然想使用控制器要做到这一点，你可以看看我的例子：

If you still want to do this by using controller you can take a look at my example: http://jsfiddle.net/4nad43gn/3/

$scope.showCustomer = function($event) {
   var element = document.querySelectorAll('[ng-controller=Controller] div');
   var tpl = $compile( "<div my-customer=''></div>" )( $scope );
   element[0].appendChild(tpl[0]);
};

您需要添加$在应用程序编译。这是可能的吗？

You need to add $compile in your application. It's possible?

这篇关于插入指令到DOM使用jqlite的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！