AngularJS-如何在表格单元格中显示按钮？

Question

我最近接手了我公司创建的 AngularJS 应用程序的开发，目前正在尝试向表格中的单元格添加一个按钮，用户可以将其用作导航按钮，并设置位置它会将您定向到用户的任何一个自定义页面。

在表格指令中，我添加了以下代码：

.directive('appTable', function(fxTag) {
    return {
        ...
        template: '...',
        controller: function($scope, $element, $compile, Global, fxEvent, fxSearch, NotifyMgr) {
            ...
            var goToPageBtnTmpl = $compile(
                '<a href="javascript:;" ng-click="goToPage(target)"' +
                '<class="btn btn-xs btn-brand">Go to Page</a>'
            );
            console.log("goToPageBtnTmpl defined: ", goToPageBtnTmpl);
            ...
            var goToPage = function(target) {
                // Code to navigate to the page set by the user
                console.log("goToPage button added: ");
            };
            ...
        }
    }
})

在 ctrl.js 中，有一个 toWidgetObj() 函数，它根据用户在表单上选择/输入的详细信息创建一个小部件：

}).controller('WidgetPickerCtrl', function($scope, $timeout, fxTag, gPresets, appWidget, appUI, pagesPresets) {
    ...
    function toWidgetObj() {
        ...
        var widgetObj = {
            name: $scope.widget.name,
            label: $scope.widget.label,
            attr: angular.copy($scope.widget)
        };

        switch(widgetObj.name) {
            case 'app-table':
                ...
                angular.forEach(widgetObj.table.rows, function(row) {
                    if(row.length > 0) {
                        reducedRows.push(row.map(
                            function(tag) {
                                if(tag.isTag) {
                                    return {tag: tag.tag, nounit: tag.nounit};
                                }
                                if(tag.isBtn) {
                                    var goToPageBtnTmpl = $compile(
                                        '<a href="javascript:;" ng-click=goToPage(target)"' + 'class= "btn btn-xs btn-brand">Go to page</a>'
                                    )
                                }
                            }
                        ));
                    }
                });
                ...
                break;
            ...
        }
        ...
        return widgetObj;
    }
    ...
});

当我当前单击表格小部件上的“编辑小部件”按钮时，会打开“编辑小部件”对话框，我会在表格中的单元格中添加一个按钮。然后，当我单击“预览”按钮以使用我在对话框中输入的更改来更新小部件时，我看到来自 directive 的打印语句显示：

goToPageBtnTmpl 定义：publicLinkFn(scope, cloneConnectFn, transcludeControllers, parentBoundTranscludeFn){ assertArg(范围, '范围');

我希望表格显示已按行编译的按钮：

var goToPageBtnTmpl = $compile(
    '<a href="javascript:;" ng-click="goToPage(target)"' +
    'class = "btn btn-xs btn-brand">Go to page</a>'
)

这会将用户带到我在对话框输入中指定地址的页面。

但是当我点击“预览”时，我实际看到的是显示的表格，而应该显示按钮的单元格实际上显示的是我输入的链接（即我希望它获取的页面地址）用户点击时）。

我在控制台的调试提示按钮添加成功：

标签是一个按钮：

{tag: "pages/userpage1", isTag: false, isBtn: true, nounit: false, units: undefined} 是Btn ： 真的 isTag ： 错误的 名词单位 ： 错误的 标签 ： “页面/用户页面 1” 单位 ： 未定义

但我实际上并没有看到页面上显示的按钮。

有人对我在这里做错了什么有任何建议吗？

编辑

所以，当我进一步研究时，我想我可能已经找到了按钮不显示的原因：编译按钮的代码写在table指令的controller函数中：

.directive('appTable', function(fxTag) {
    return {
        ...
        controller: function(...) {
            ...
            var gotToPageBtnTmpl = $compile(
                ...
            );

所以这是在页面第一次加载时运行的。但是，我试图在页面已经加载之后手动将按钮添加到表格中，并且我用来执行此操作的代码稍后会在相同的 controller 函数中编写：

            if(!$scope.noTagAlarm()) {
                angular.forEach($scope.config.columns, function(col) {
                    ...
                    if(col.header.startsWith(":")) {
                        angular.forEach($scope.config.rows, function(row) {
                            col.template = function(value, row, metadata) {
                                goToPageBtnTmpl(value);
                            }
                        })
                    }else{
                        console.log("column doesn't start with ':' ");
                    }
                    ...
                });
            }

我的想法是，由于此代码是在指令的 controller 函数中编写的，因此它可能仅在页面首次加载时运行，而不是在我使用“编辑小部件”对话框编辑小部件时运行，因此 HTML未渲​​染。

会是这样吗？如果是这样，如何在编辑后重新加载小部件而不刷新整个页面？或者，如果不是，我在这里实际上做错了什么？

Answer 1

这里的问题是col.template 中使用的函数需要返回我想要创建的按钮：

col.template = function(value, row, metadata) {
    return [
        umWidget.getBtnTmpl(
            $scope.$new(true),
            goToPage,
            value,
            value)
    ];
}

我在 Widget/service.js 中定义了getBtnTmpl() 函数：

function getBtnTmpl(scope, fn, target, title) {
    scope.fn = fn;
    scope.target = target
    var pageTitle = title.split('/');
    scope.title = pageTitle[1];

    return btnTmpl(scope);
}

并将btnTmpl 设置为 Widget/service.js 中的全局变量：

var btnTmpl = $compile(
    '<a href="javascript:;" ng-click="fn(target)"' +
    'class="btn btn-xs btn-brand">{{title}}</a>'
);