插入指令到DOM使用jqlite [英] Insert directive into the DOM using 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}}'
       };
});

http://jsfiddle.net/4nad43gn/

请注意：这只是尝试和重建我在局面，但该指令必须插入到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.

如果你仍然想使用控制器要做到这一点，你可以看看我的例子：的http：// jsfiddle.net/4nad43gn/3/

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！