다음과 같은 코드가 있습니다.
$scope.printOutRowModel = function(){
console.log("blah");
}
$scope.createTable = function(name)
{
var element = angular.element(document.querySelector('.popup'));
var content = "";
content+='<div><hr/>';
content+='<h4>'+name+'</h4>';
content+='<table><thead>';
var columnName = Object.keys($scope.genericModel[name][0]);
for(var i=0; i<columnName.length; i++)
{
if(columnName[i] != "$$hashKey")
{
content+='<th>'+columnName[i]+'</th>';
}
}
content+='</thead><tbody>';
for(var j=0; j<$scope.genericModel[name].length; j++)
{
content+='<tr>';
var value = Object.values($scope.genericModel[name][j]);
for(var i=0; i<value.length-1; i++)
{
content+='<td>'+value[i]+'</td>';
}
content+='</tr>';
value = null;
}
content+='</tbody></table></div>';
element.html(content);
}
이제 내가 원하는 것은 생성 된 "td"요소에 'ng-click = "printOutRowModel ()"'을 추가하는 것입니다. 여러 가지 방법을 시도했지만 작동하지 않습니다. 내 index.html에 이미있는 다른 요소에 추가하면 작동합니다. 그래서 나는이 생성 된 HTML이 범위 나 그 어떤 것에서 "컴파일"되지 않는다고 생각합니다. 그래서 이것을 할 방법이 있습니까?
앱에 다음 지시문을 추가하십시오.
app.directive('template', ['$compile', function($compile) {
return function(scope, element, attrs) {
attrs.$observe("template", function(_newVal) {
scope.$applyAsync(function() {
element.html(_newVal);
$compile(element.contents())(scope);
});
});
};
}]);
그런 다음 함수에서 .popup클래스 를 선택하는 대신 다음을 createTable수행하십시오.
<div class="popup" template="{{myTableTpl}}"></div>
그리고 다음과 같이 기능을 변경하십시오.
$scope.createTable = function(name)
{
var content = "";
// Create your content...
$scope.myTableTpl = content;
}
<!doctype html>
<html ng-app="app">
<body ng-controller="ctrl">
<div template="{{tpl}}"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('template', ['$compile',
function($compile) {
return function(scope, element, attrs) {
attrs.$observe("template", function(_newVal) {
scope.$applyAsync(function() {
element.html(_newVal);
$compile(element.contents())(scope);
});
});
};
}
])
.controller('ctrl', function($scope) {
$scope.tpl = '<h1>METE-30</h1>'
});
</script>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다