javascript - 使用 Angular 调用 href 以打开模态

Question

语境
我在这工作 Tutorial , 是关于带有 DataTable 的 CRUD，但不同之处在于我将 Asp.Net WebApi 与 Angular 一起使用
我进入第 9 步，其中教程为弹出窗口制作了部分 View ，但我不使用部分 View ，而是使用 Angular View
问题
我不知道如何为我的 Angular View 替换该部分 View
代码
查看

<table class="table table-striped table-hover table-bordered dt-bootstrap no-footer" id="tabla_catalogos" role="grid" aria-describedby="sample_editable_1_info">
  <thead>
    <tr>
      <th class="hidden"></th>
      <th style="width: 200px;"> Codigo </th>
      <th> Nombre </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JS

    $('#tabla_catalogos')
        .DataTable({
            searching: true,
            dom: 'ftpB',
            autoWidth: false,
            buttons: [
                //'excelHtml5', 'csv', 'print'
            ],
            paging: true,
            select: {
                style: 'single'
            },
            info: false,
            ordering: true,
            "processing": true,
            ajax: {
                method: 'GET',
                url: "../../api/Catalogo/GetCatalogoRegistro/" + selected.ID,
                dataSrc: '',
                beforeSend: function(request) {
                    request.setRequestHeader("Version", $scope.usuario.Version);
                    request.setRequestHeader("Origen", 'Web');
                }
            },
            columns: [
            { data: 'Catalogo', visible: false, searchable: false },
            { data: 'Codigo' },
            { data: 'ID', visible: false, searchable: false },
            { data: 'Nombre' },
            { data: 'Padre', visible: false, searchable: false },
            {
                data: 'ID',
                render: function(data){
                    return '<a class="popup" href="root.detalleregistros'+data+'">Editar</a>';
                }
            },
             {
                 data: 'ID',
                 render: function (data) {
                     return '<a class="popup" href="root.detalleregistros' + data + '">Eliminar</a>';
                 }
             }

            ],
            pageLength: 10 //,
            //pagingType: "simple_numbers"
            ,
            language: {
                "emptyTable": "No se encontraron registros",
                "zeroRecords": "No encontraron coincidencias",
                "search": "Buscar: "
            }
        });

    $('.tablecontainer').on('click', 'a.popup', function (e) {
        e.preventDefault();
        OpenPopup($(this).attr('href'));
    });

    function OpenPopup(pageUrl) {
        var $pageContent = $('<div/>');
        $pageContent.load(pageUrl, function () {
            $('#popupForm', $pageContent).removeData('validator');
            $('#popupForm', $pageContent).removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse('form');

        });

        $dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
                  .html($pageContent)
                  .dialog({
                      draggable: false,
                      autoOpen: false,
                      resizable: false,
                      model: true,
                      title: 'Popup Dialog',
                      height: 550,
                      width: 600,
                      close: function () {
                          $dialog.dialog('destroy').remove();
                      }
                  })

        $('.popupWindow').on('submit', '#popupForm', function (e) {
            var url = $('#popupForm')[0].action;
            $.ajax({
                type: "POST",
                url: url,
                data: $('#popupForm').serialize(),
                success: function (data) {
                    if (data.status) {
                        $dialog.dialog('close');
                        oTable.ajax.reload();
                    }
                }
            })

            e.preventDefault();
        })
        $dialog.dialog('open');
    }

};

Angular 服务，调用 View :

.state('root.detalleregistros', {
                 url: "detalleRegistros.html",
                 templateUrl: "../SPA/administrador/catalogos/detalleRegistros.html",
                 controller: "detalleRegistrosCtrl",
                 authenticate: true
             })

当我点击 url 作为 mi 代码时 '<a class="popup" href="root.detalleregistros'+data+'">Editar</a>';它将我重定向到 http://localhost:55720/admin/root.detalleregistros/1反而 http://localhost:55718/admin/#/detalleRegistros.html我在那里做错了什么？非常感谢帮助。问候
我试试 '<a class="popup" ui-sref="root.detalleregistros({data:11})">Editar</a>';正如@Agam Banga 评论但模态只是不打开，我需要在表格 View 中添加一些内容吗？或者那里有什么问题？

Answer 1

您已为“root.detalleregistros”定义了状态。要打开此状态，您需要使用 ui-router 的 inbuild 指令，即 ui-sref。

<a ui-sref="root.detalleregistros">Editar</a>

另外，如果你想传递参数，你可以使用

<a ui-sref="root.detalleregistros({data:11})">Editar</a>