how to use AngularJS directive using jQuery append?

Question

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.

Can you please show me an example.. How should I achieve that, I have tried and it's also not working ? code in app.js ` cmsApp.directive('myLink', function() { function link(scope, element, attrs) { element.on('click', function() { console.log('Its clicked'); }); } return { restrict: 'A', link: link }; }); ` and in jQuery: ` function addNewRecords(html){ $record = "<a my-link></a>"; $("ul#oojRecordsLinks").append($record); } ` — Vishal Khode
– Vishal Khode, Commented Apr 3, 2014 at 9:02

Vishal Khode · Accepted Answer · 2014-04-11 19:27:19Z

2

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.. :)

answered Apr 11, 2014 at 19:27

Vishal Khode

8412 gold badges9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to use AngularJS directive using jQuery append?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related