我创建了一个简单的plnk @ plnkr.co。它在那里不起作用。
但是,相同的代码在本地运行也很流畅。
plnk @ plnkr.co link
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中的输出如下:
你好,笨蛋!
[[object HTMLInputElement],[object HTMLSpanElement]]
奇怪,但是当我在本地html中运行相同代码时,它就很好了。这里发生了什么 ??
我也使用angular js 1.2.6,因为那是我的工作中使用的东西-生产应用程序...所以我现在正在学习使用1.2.6。
最佳答案
您只需要进行一些不同的编译即可。
element.html("<input type='text' ng-model='text' />{{text}}");
$compile(element.contents())(scope);
Plunker
简短地说:我假设您在这里所做的工作得到了简化,并且在您的实际情况下,需要编译模板,因为目前还没有。