将动态加载的内容绑定到Angular
[英]Bind dynamic loaded content to Angular
问题描述
I want to bind some dynamic content, loaded by jQuery, to Angular but i couldn't get it work. 
我想将由jQuery加载的一些动态内容绑定到Angular，但是我无法使其正常工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript">
var module = angular.module('ctrl', []);
module.directive('helpMe', function() {
return {
restrict: 'E',
template: '<div><button ng-click="clicker()">Click 1</button><button ng-click="create()">Create</button><div ng-hide="true">FooBar</div></div>',
controller: ['$scope', function($scope) {
$scope.clicker = function () {
console.log('Clicked...');
};
$scope.create = function () {
$('#foo').contents().clone().appendTo('#bar');
}
}]
}
});
</script>
</head>
<body ng-app="ctrl">
<div id="foo">
<help-me></help-me>
</div>
<div id="bar">
</div>
</body>
If i click the "Click 1" button, the console logs it. 如果我单击“单击1”按钮，则控制台将其记录下来。 If i click the "create" button, a new set of buttons appears. 如果我单击“创建”按钮，则会出现一组新的按钮。 But the new buttons don't work. 但是新按钮不起作用。 I could not find out how to get this work. 我不知道如何进行这项工作。 Any ideas? 有任何想法吗？
2 个解决方案
解决方案1
4 已采纳 2015-12-18 10:23:03
You need to call $compile on the HTML string before inserting it into the DOM so that angular gets a chance to perform the binding. 您需要在HTML字符串上调用$compile ，然后再将其插入DOM中，以便angular有机会执行绑定。
$scope.create = function() {
var clone = $('#foo').contents().clone();
$compile(clone)($scope);
$('#bar').append(clone);
}
解决方案2
0 2015-12-18 10:29:45
Try this it will work:- 试试这个将起作用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript">
var module = angular.module('ctrl', []);
module.directive('helpMe', function() {
return {
restrict: 'E',
template: '<div><button ng-click="clicker()">Click 1</button><button ng-click="create()">Create</button><div ng-hide="true">FooBar</div></div>',
controller: ['$scope','$compile' function($scope,$compile) {
$scope.clicker = function () {
console.log('Clicked...');
};
$scope.create = function () {
$('#foo').contents().clone().appendTo('#bar');
$compile($('#bar'))($scope);
}
}]
}
});
</script>
</head>
<body ng-app="ctrl">
<div id="foo">
<help-me></help-me>
</div>
<div id="bar">
</div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.