Angular modal not working after ajax return

Question

So I have a button:

 <button type="button" ng-click="open('new_cm')" class="btn btn-primary" id="prideti">Add

Which calls a modal to open

I'm using AJAX to reload my html content(which contains that button) And button does not work after refreshing data. Maybe ng-click needs to be instillized somehow?

ajaxification:

<script>

    function ajaxifyGridMvc(gridContainerSelector, successCallback) {
        $(gridContainerSelector).on("click", ".grid-header a, .grid-pager li a",
            function (event) {
                var $grid_container = $(event.delegateTarget);
                var baseUrl = $grid_container.attr("data-source-url");
                var link = $(this).attr("href");
                $.get(baseUrl + link, function (data) {
                    if (data.Status <= 0) {
                        alert(data.Message);
                        return;
                    }
                    $grid_container.html(data);
                    if ($.isFunction(successCallback))
                        successCallback();
                });

                return false;
            });
    }

</script>

ajaxification on page load:

   <script>
        $(document).ready(function () {
            ajaxifyGridMvc("#mylists");
        });</script>

Changes are made here:

        <div id="mylists" data-source-url="@Url.Action("markemodelis")">
            @{Html.RenderAction("markemodelis");}
        </div>

Open() js:

  if (size == "new_cm") {
        modalInstance = $modal.open({

            templateUrl: '/Administration/CreateMM',
            controller: ModalInstanceCtrl,
            size: size,
            resolve: {
                items: function () {

                    return $scope.items;
                }
            }

        });
    }

One suggestion to get helpful answers is to create a JSFiddle demonstrating the issue. — drew_w, Jul 21 '14 at 13:44

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

Your problem is you are doing too much outside of angular. When you inject html with directives contained in it, angular doesn't know they exist.

You have to use $compile from within a directive to compile the directives with current scope context or they won't be recognized within angular.

Since all you have shown is jQuery and no html it is hard to tell you where to apply this directive.

You would be far better off getting rid of the jQuery and working within angular the way it is designed to work

See: How do I “think in AngularJS” if I have a jQuery background?

edited May 23 '17 at 12:13

Community

1
1

answered Jul 21 '14 at 14:16

charlietfl

170,828
13
121
150

I cant change jquery code, since it is implamented with Grid layout I'm using to use paginator. Paginator works, but problem Is the same. So I should use compile somehow? – user2614879 Jul 21 '14 at 14:24
ok, but if you ran that jQuery in an angular directive you would have scope access to do the `$compile` – charlietfl Jul 21 '14 at 14:25
How could I run it in angular? And is there any other way or this is only one? – user2614879 Jul 21 '14 at 14:27
creating a directive for it is the best way and isn't difficult – charlietfl Jul 21 '14 at 14:28
where can I learn how to do that? Oh and thank you for explaining that! – user2614879 Jul 21 '14 at 14:29

Angular modal not working after ajax return

1 Answers1