Question

上下文

我在这个Tutorial工作，是关于使用DataTable的CRUD，但差异我使用带有Angular的Asp.Net WebApi

我进入第9步，其中教程为弹出窗口制作了部分视图，但我不使用局部视图，而是使用角度视图

问题

我不知道如何为我的角度视图替换部分视图

代码

查看

<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 Service，调用视图：

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

当我将其作为mi代码'<a class="popup" href="root.detalleregistros'+data+'">Editar</a>'; clic into url时，它会将我重定向到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评论，但模态只是不打开，我需要添加一些东西到表视图？或者那里可能出现什么问题？

Answer 1

您已为＆＃34; root.detalleregistros＆＃34;定义了状态。要打开此状态，您需要使用ui-sref的ubu-path的inbuild指令。

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

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

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

用Angular调用href打开模态

1 个答案: