ajax返回后，Angular模态不起作用

Question

我有一个按钮:

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

调用一个模式打开

我使用AJAX重新加载我的html内容(其中包含该按钮)刷新数据后按钮不工作。也许ng-click需要以某种方式灌输?

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>

页面加载时的ajax:

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

修改在这里:

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

Answer 1

你的问题是你在angular之外做得太多了。当你注入含有指令的html时，angular并不知道它们的存在。

你必须在指令中使用$compile来编译具有当前作用域上下文的指令，否则它们将无法在angular中被识别。

因为你所展示的都是jQuery而不是html，所以很难告诉你在哪里应用这个指令。

你最好摆脱jQuery，用angular设计的方式工作

参见:如果我有jQuery背景，我如何"用AngularJS思考"?