javascriptangularjscodeigniterangularjs-controllerangularjs-compile

how to call angularjs function which is appended in div

$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 ?

Solution

  • 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);