2

我正在开发一个使用 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。可能是什么问题？是否有一些我可能错过的配置？

谢谢

4

2 回答 2

3

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

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

于 2013-11-15T11:05:51.747 回答
1

撇开最佳实践不谈，我自己刚刚遇到并解决了这个问题。因为 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: "=" }
    };
}
于 2014-06-17T12:24:06.507 回答