Использование нг кнопкой мыши и область применения функции в генерируемой HTML (angularJs)

У меня есть такой код:Использование нг кнопкой мыши и область применения функции в генерируемой HTML (angularJs)

$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); 
}

Так что теперь я хочу сделать, это добавить «нг-клик =„printOutRowModel()“ 'к сгенерированным «td» элементам. Я пробовал несколько способов, но я не работаю. Когда я добавляю его к любому другому элементу, который уже находится в моем index.html, он работает. Поэтому я предполагаю, что этот сгенерированный HTML не «компилируется» в области или что-то в этом роде. Так есть ли способ сделать это?

источник

2017-02-01 Anonymous

Добавьте эту директиву в вашем приложении:

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>

источник

2017-02-01 10:25:20

Я сделал это, но я не получаю свой контент на странице, но когда я нажимаю f12 на своей странице, он показывает его под шаблоном = "...". Я что-то делаю неправильно? –

@ i1zivkovic это странно! есть ли у вас какие-либо ошибки в консоли? –

Нет, я не понимаю. hm .. Я попытался переместить {{myTableTpl}} внутри тегов div, но он отображает содержимое как строку. Я только начал делать угловые, поэтому я действительно не знаю. –

Использование нг кнопкой мыши и область применения функции в генерируемой HTML (angularJs)

ответ

Смежные вопросы