使用 Angular 调用 href 打开模态

Posted 2023-05-07

【中文标题】使用 Angular 调用 href 打开模态

【英文标题】：Calling href with Angular to open modal

【发布时间】：2017-09-13 20:24:46

【问题描述】：

上下文

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

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

问题

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

代码

查看

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

.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>'; 时，它会将我重定向到 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 评论，但模态只是不打开，我需要在表格视图中添加一些东西吗？或者那里有什么问题？

【问题讨论】：

Great @josep :) 请不要重复发布相同的问题，最好更新原始帖子以进行澄清或阐述。

是的，我更新了这个并删除了其他帖子@davidkonrad

【参考方案1】：

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

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

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

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

【讨论】：

我做了，但是我的模态没有打开，没有错误 ok 控制台，只是不要打开

兄弟你在吗？