Question

我是angularJs的新手，我有一个使用angular modal和jqGrid的应用程序。（我知道这不好。但出于某种原因，我现在必须与两人合作。）

我的模态内容加载了templateUrl。

<div ng-controller="SearchPerson as ctrl">
    <div class="modal-body">
        <table id="list"></table>
        <div id="pager"></div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-link" data-dismiss="modal" ng-click="$close()">CLOSE</button>
        <button type="button" class="btn btn-primary" ng-click="ctrl.CLOSE()">Save changes</button>
    </div>
</div>

并且对于create我有这个代码：

$(function () {
    $("#list").jqGrid({
        url: "/Home/List",
        datatype: "json",
        mtype: 'GET',
        colNames: [" ", "FirstName", "LastName"],
        colModel: [
            {
                width: 30,
                sortable: false,
                formatter: function (cellvalue, options, rowObject) {
                    return '<a href="javascript:ctrl.Select();">SELECT</a>';
                },
            },
            {
                name: "FirstName",
                width: 60,
            },
            {
                name: "LastName",
                width: 90
            }
        ],
        jsonReader: {
            page: "Page",
            total: "Total",
            records: "Records",
            root: "Rows",
            repeatitems: false,
            cell: "cell",
            id: "id",
            userdata: "userdata",
        },
        pager: "#pager",
    });
});

对于open modal我写这段代码：

angular.module('AngularModal', ['ui.bootstrap']);
    angular.module('AngularModal').controller('ModalDemoCtrl', function ($scope, $modal) {

        $scope.open = function (size) {

            var modalInstance = $modal.open({
                templateUrl: '/Home/SearchGrid',
                controller: 'ModalInstanceCtrl',
                size: size,
                backdrop: 'static',
            });

            modalInstance.result.then(function () {
                // 
            }, function () {
                //
            });
        };

    });
    angular.module('AngularModal').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
        $scope.ok = function () {
            $modalInstance.close();
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };

    });

    angular.module('AngularModal').controller('SearchPerson', function ($http, $modalStack) {

    });

我想要的是：当我点击网格中的SELECT链接时，提醒FirstName然后关闭模态。

怎么做？

值得注意的是，当我点击CLOSE按钮时，模态关闭。而且当我点击“保存更改”按钮时，模态将关闭。但是当我单击SELECT链接时，模态不会关闭。我写了两次单击SELECT和“保存更改”。

Answer 1

你的代码绝对不行。对于ng-click，表达式的上下文是当前$scope，而对于href="javascript:expression"，上下文是全局的，或者说window。

根据您的情况，我肯定建议您尝试一些与AngularJS更兼容的其他网格库（如http://angular-ui.github.io/ng-grid/或http://ui-grid.info/）。这可能会节省大量时间。

否则，如果你真的坚持使用jqGrid，你可能需要自己手动将它包装成一个指令。在您的应用程序中，您可能需要考虑如何“格式化”为格式化程序函数生成的html代码段。

formatter: function (cellvalue, options, rowObject) {
    var html = '<a ng-click="ctrl.Select()">SELECT</a>';
    var linkFunc = $compile(html);
    linkFunc(scope);         // the scope in which you have the `ctrl.Select()` function.
    return html;
},

$ compile：https://docs.angularjs.org/api/ng/service/ $ compile

然后你就可以调用角度范围函数了。

但是，在我看来，这不是一个好习惯。如有可能，请找一个替换库。

关闭角度模态

1 个答案: