Question

我创建了一个简单的plnk @ plnkr.co。它在那里不起作用。但是，相同的代码在本地运行顺畅。

的index.html

<!DOCTYPE html>
<html ng-app='app'>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.6" src="https://code.angularjs.org/1.2.6/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller='controller'>
    <h1>Hello Plunker!</h1>
    <div my-sample></div>
  </body>

</html>

的script.js

// Code goes here
'use strict';
var app = angular.module('app',[]).
controller('controller',function($scope)
{

}).directive('mySample',function($compile)
{
  return {
    link : function(scope,element,attrs,controller)
    {
      var markup = "<input type='text' ng-model='text' />{{text}}"
      angular.element(element).html($compile(markup)(scope));
    }
  }
});

plnkr中的输出如下：

Hello Plunker！

[[object HTMLInputElement]，[object HTMLSpanElement]]

很奇怪，但是当我在本地html中运行相同时它渲染得很好。这里发生了什么？？

另外我使用角度js 1.2.6因为那就是我工作中使用的东西 - 制作应用程序......所以我现在正在使用1.2.6学习角度。

Answer 1

你只需要以不同的方式编译它。

element.html("<input type='text' ng-model='text' />{{text}}");
$compile(element.contents())(scope);

Plunker

只是一句简单的话：我假设你在这里所做的事情是简化的，在你的实际案例中需要编译你的模板，因为目前还没有。

AngularJS，自定义指令不工作@ plnkr

1 个答案: