how to call angularjs function which is appended in div

1
votes
$scope.showtbleoption =  function(id)
{
    console.log(id);
    $("#showoption").empty();
    $("#showoption").append('<button class="btn btn-info" ng-click="editrc(id)">');
};

how to call editrc() function in angularjs controller ?

3
javascriptangularjscodeigniterangularjs-controllerangularjs-compile
Create function using scope variable inside controller. $scope.editrc = function(id){}; – Rakhi Prajapati

3 Answers

3
votes

Appending raw DOM with jQuery would make angular directive compile. You have to use $compile service, by which you will be $compile that DOM first & then inject that DOM in DOM tree. $compile is API function(returns function) which ask for DOM, then you can again call that function by passing $scope to evaluate against particular context. $compile API method will take care of compiling all directives on DOM & update bindings.

In below case id value wouldn't be available inside $scope directly, you could either store it in a scope variable or pass it by string concatenation.

var compiledDom=$compile('<button class="btn btn-info" ng-click="editrc('+id+')">')($scope);
$("#showoption").append(compiledDom);
0
votes

Instead of appending using jQuery, use $compile service to bind it to dom. Like this:

$scope.domEle = $compile('<button class="btn btn-info" ng-click="editrc(id)">')

and in HTML call like this:

{{ domeEle }}

And in controller define editrc function like this:

$scope.editrc = function(val){

}
0
votes

You can use the ng-bind-html directive to bind the html's to the template dynamically . You will however have to compile the html using $compile by doing $compile(<html>) . Any expressions mentioned in the compiled html could call the definitions you provide in the controller .