Question

我正在开发一个业务应用程序，它使用Angular在Node.js api服务器周围创建SPA。我决定使用状态机的ui-router原因以及它们嵌入URL的直观方式，但是当我在指令中创建动态URL时，我偶然遇到了一些挑战。

我将jQuery Datatables用作数据网格作为指令，但使用'fnRender'生成的任何动作链接似乎都不会将'ui-sref'编译为各自的'href'链接。指令代码如下：

app.directive('datatable', function ($http) {
  return {
    restrict: 'A',
    link: function ($scope, $elem, attrs) {
        var responsiveHelper;
        var breakpointDefinition = {
            tablet: 1024,
            phone : 480
        };
        var options = {
            bDeferRender: true,
            sPaginationType: "full_numbers",
            oLanguage: {
                sEmptyTable: "No records returned",
                sSearch: "<span>Search:</span> ",
                sInfo: "Showing <span>_START_</span> to <span>_END_</span> of <span>_TOTAL_</span> entries",
                sLengthMenu: "_MENU_ <span>entries per page</span>",
                sProcessing: "Loading..."
            },
            sDom: "lfrtip",
            oColVis: {
                buttonText: "Change columns <i class='icon-angle-down'></i>"
            },
            oTableTools: {
                sSwfPath: "js/plugins/datatable/swf/copy_csv_xls_pdf.swf"
            },
            bAutoWidth     : false,
            fnPreDrawCallback: function () {
                if (!responsiveHelper) {
                    responsiveHelper = new ResponsiveDatatablesHelper($elem, breakpointDefinition);
                }
            },
            fnRowCallback  : function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                responsiveHelper.createExpandIcon(nRow);
            },
            fnDrawCallback : function (oSettings) {
                responsiveHelper.respond();
            }
        };
        if (typeof $scope.dtOptions !== 'undefined') {
            angular.extend(options, $scope.dtOptions);
        }
        if (attrs['dtoptions'] === undefined) {
            for (property in attrs) {
                switch (property) {
                    case 'sajaxsource':
                        options['sAjaxSource'] = attrs[property];
                    break;
                    case 'sajaxdataprop':
                        options['sAjaxDataProp'] = attrs[property];
                    break;
                }
            }
        } else {
            angular.extend(options, $scope[attrs['dtoptions']]);
        }   

        if (typeof options['sAjaxSource'] === 'undefined') {
            throw "Ajax Source not defined! Use sajaxsource='/api/v1/*'";
        }
        if (typeof options['fnServerData'] === 'undefined') {
            options['fnServerData'] = function (sSource, aoData, resultCb) {
                $http.get(sSource, aoData).then(function (result) {
                    resultCb(result.data);
                });
            };
        }
        options.aoColumnDefs = [];
        $elem.find('thead th').each(function() {
            var colattr = angular.element(this).data();
            if (colattr.mdata) {
                if (colattr.mdata.indexOf("()") > 1) {
                    var fn = $scope[colattr.mdata.substring(0, colattr.mdata.length - 2)];
                    if (typeof fn === 'function') {
                        options.aoColumnDefs.push({
                            mData: fn,
                            sClass: colattr.sclass,
                            aTargets: [colattr.atargets]
                        });     
                    } else {
                        throw "mData function does not exist in $scope.";
                    }
                } else {
                    options.aoColumnDefs.push({
                        mData: colattr.mdata,
                        sClass: colattr.sclass,
                        bVisible: colattr.bvisible,
                        aTargets: [colattr.atargets]
                    }); 
                }
            } else {
                if (colattr.fnrender.indexOf("()") > 1) {
                    var fn = $scope[colattr.fnrender.substring(0, colattr.fnrender.length - 2)];
                    if (typeof fn === 'function') {
                        options.aoColumnDefs.push({
                            fnRender: fn,
                            sClass: colattr.sclass,
                            aTargets: [colattr.atargets]
                        });     
                    } else {
                        throw "fnRender function does not exist in $scope.";
                    }
                } else {
                    options.aoColumnDefs.push({
                        fnRender: function (oObj) {
                            return "<a tooltip class='btn' title='View' ui-sref=\""+colattr.tag+".show({slug:\'"+oObj.aData._id+"\'})\"><center class=\"icon-search\"></center></a>";
                        },
                        sClass: colattr.sclass,
                        bVisible: colattr.bvisible,
                        aTargets: [colattr.atargets]
                    }); 
                }
            }
        });
        $elem.dataTable(options);
        $(".dataTables_length select").wrap("<div class='input-mini'></div>").chosen({disable_search_threshold: 9999999 });
    }
  }
});

它可以完成并发症，甚至可以生成以下锚标记：

<a ui-sref="organisation.show({slug:'527a44c02aa9ce3a1c3fbc17'})"></a>

但是，ui-router不会将其编译为相应的状态URL。可能是什么问题？是否有一些我可能错过的配置？

由于

Answer 1

您是否在数据表中使用任何其他指令或表达式？我猜这些也行不通，因为看起来Angular永远不会有机会编译你正在生成的任何HTML。

这与uiSref无关，而与正确编写指令有关。就最佳实践而言，该指令的方式代码太多。您应该将其分解为多个嵌套指令和直接HTML。我建议花一些时间学习有关转换和使用指令控制器执行嵌套指令。

Answer 2

暂且不谈最佳做法，我刚刚遇到并自行解决了这个问题。因为DataTables正在修改Angular的事件循环之外的DOM，所以ui-sref属性不会被编译。这是一个简单的修复：你需要在每一行创建时调用$ compile。

这是我的（更简单）指令：

function datatable($compile) {
    return {
        restrict: "A",
        link: (scope, elem, attrs) => {


            // THE IMPORTANT BIT
            scope.options.createdRow = function (row) {
                $compile(row)(scope);
            };


            var api = elem.DataTable(scope.options);
            var handleUpdates = function (newData) {
                var data = newData || null;
                if (data) {
                    api.clear();
                    api.rows.add(data).draw();
                }
            };
            scope.$watch("options.data", handleUpdates, true);
        },
        scope: { options: "=" }
    };
}

Angular ui-router ui-sref在指令中动态创建？

2 个答案: