Вот jsfiddle, показывающий проблему: http://jsfiddle.net/yRLKe/5/
Одна кнопка компилируется перед внедрением в DOM, другая — перед компиляцией. Я сделал и то, и другое, чтобы убедиться, что способ компиляции не был причиной проблемы.
Какую бы кнопку вы ни нажали, проверьте вывод консоли, и вы увидите, что фактическое содержимое шаблона недоступно при выборе из DOM.
Итак, вопрос, во-первых, почему? - почему так себя ведет? но самое главное как? - как я могу получить доступ к HTML-коду фактического загруженного шаблона через селекторы DOM?
Вот шаблон:
<script type="text/ng-template" id="template1.html">
<div>This is template 1!</div>
<div id="test">Hello {{name}}</div>
</script>
Вот контроллер:
myApp.controller('MyCtrl', function($scope) {
$scope.name = 'Superhero';
$scope.template = {url:'template1.html'};
$scope.clickButton1 = function(){
$scope.$emit('buttonClicked1');
};
$scope.clickButton2 = function(){
$scope.$emit('buttonClicked2');
};
});
Вот директива:
myApp.directive('compileBeforeInsert', function($compile){
return function(scope, element, attrs){
scope.$on('buttonClicked1',function(ev){
var container = $('#container');
container.html('<div ng-include src="template.url" id="template">test1</div>');
$compile(container)(scope);
console.log('before');
console.log($('#template').html());
});
}
});
Эта директива выводит «test1» на консоль, тогда как я ожидал, что она выведет «Hello Superman!».
