AngularJS directive are not working when appended with jQuery

Question

i am appending given below html form returned from server side in response of ajax call

<div ng-app="submitExample"  >
    <form action="shan" ng-submit="submit()" ng-controller="ExampleController" id="account_info_modal">

    Enter text and hit enter:
        <input type="text" ng-model="text" name="text" />
        <input type="submit" id="submit" value="Submit" />

  </form>


</div>

here angular js directive are not working when appending form using ajax but when form is on page then angular js code working properly my angular js script is given below

(function() {
    angular.module('submitExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
            $scope.submit = function() {
                alert("hello submit");
            };
        }]);
})();

give below function i am using to append html form

function show_account_info_modal(param)
    {

        var id=$(".jstree-clicked").parent().attr('id');
        var name=$(param).attr('name');

        $.ajax({
            type: 'get',
                url: '<?= admin_url('Chart_of_accounts/get_account_info_modal'); ?>',
            data: { account_id:id,name:name },
            success: function (data)
            {
                $("#account_info_modal").html(data)
            }
        });


    }

Don't even use jQuery. Don't even include it. It will hold you back. And when you come to a problem that you think you know how to solve in jQuery already, before you reach for the $, try to think about how to do it within the confines the AngularJS. If you don't know, ask! 19 times out of 20, the best way to do it doesn't need jQuery and to try to solve it with jQuery results in more work for you. — georgeawg, Jan 04 '18 at 16:18
currently i have implement code of jquery i want to extend my functionality with angular js and dont want to write code the pre developed functionality again — Shahneel Ahmed, Jan 05 '18 at 05:19

score 2 · Answer 1 · answered Jan 04 '18 at 11:07

You need to use $compile service when appending element.

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

As per your code use

$("#account_info_modal").html($compile(data)($scope))

Here is an example

(function(angular) {
  'use strict';
  angular.module('myApp', [])
    .controller('Controller', ['$scope', '$compile',
      function($scope, $compile) {

        $scope.click = function() {
          console.log($scope.text)
        }

        //Append element dynamically
        var html = $compile('<input type="text" ng-model="text" name="text" /><button type="button" ng-click="click()">Click Me</button>')($scope);
        angular.element(document.querySelector('#x')).append(html);

      }
    ]);

})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller">
    <div id="x">
    </div>
  </div>
</div>

Using the `$compile` service in a controller is a [code smell](https://en.wikipedia.org/wiki/Code_smell) -- a symptom of a deeper problem. In most cases the AngularJS framework has a better way that is easier to understand, debug, and maintain. For more information, see [“Thinking in AngularJS” if I have a jQuery background?](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). — georgeawg, Jan 04 '18 at 16:27
@satpal please tell me how we will define click function called inside ng-click directive in your example code ng-click="click()" — Shahneel Ahmed, Jan 05 '18 at 05:10

AngularJS directive are not working when appended with jQuery

1 Answers1