CODEWITHSUNDEEP
jqueryangularjs
Vishal Khode
Vishal Khode

Reputation: 841

how to use AngularJS directive using jQuery append?

I have lots of code written in jQuery. Now I want an approach,Thousand lines of jQuery code is written, so I think it's better to achieve new functionalities using AngularJS. What basically I need is:

I have following code in app.js: 

var cmsApp = angular.module('cmsApp', []);
cmsApp.controller('OOJRecordTab',['$scope' ,function($scope, $compile) {
  $scope.test = function() {
    console.log('Test');
  };
}]);

HTML:

<ul>
    <li class="dropdown open">
        <a>Records <span>0</span></a>
        <ul id="oojRecordsLinks" class="dropdown-menu">
            <li>
                <a ng-click="test()" tabindex="-1">test</a>
            </li>
        </ul>
    </li>
</ul>

The above click function works perfectly. Now I have a function in jQuery like:

function addNewRecords(html){
    $record = "<a ng-click='test()'></a>";
    $("ul#oojRecordsLinks").append($record);
}

Click function for this newly appended row doesn't work. Please suggests. Someone help me please. It's not working till now.

Upvotes: 1

Views: 5902

Answers (1)

Vishal Khode
Vishal Khode

Reputation: 841

Finally I found the answer on my own. We can add using jQUery the newly added html elements, but we need to compile it under the scope with AngularjS.. After working hours and hours, finally I did it.. And here's the Plnkr Link.

Thank you all.. :)

Upvotes: 2

Related Questions