Question

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

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

$ cat test.json | \
  jq 'if .ParameterKey == "Project" then . + {"ParameterValue" : "val" }  else . end'
{
  "ParameterKey": "Project",
  "ParameterValue": "val"
}

在ctrl.js中，有一个.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: "); }; ... } } })函数，它根据用户在表单上选择/输入的详细信息创建一个小部件：

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; } ... });中的print语句：

goToPageBtnTmpl定义：publicLinkFn（scope，cloneConnectFn，transcludeControllers，parentBoundTranscludeFn）{ assertArg（范围，'范围'）;

我期待该表显示由该行编译的按钮：

directive

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

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

我在控制台中的调试声明该按钮已成功添加：

标签是一个按钮：

{tag：“pages / userpage1”，isTag：false，isBtn：true，nounit：false，units：undefined}   isBtn   ：   真正   ISTAG   ：   假   nounit   ：   假   标签   ：   “页/ userpage1”   单位   ：   未定义

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

任何人都有任何建议我在这里做错了吗？

修改

所以，当我进一步研究这个时，我想我可能已经找到了没有显示按钮的原因：编译按钮的代码写在var goToPageBtnTmpl = $compile( '<a href="javascript:;" ng-click="goToPage(target)"' + 'class = "btn btn-xs btn-brand">Go to page</a>' )指令的{{1}中功能：

table

所以这是在页面首次加载时运行的。但是，我试图在页面加载后手动将按钮添加到表中，我用来执行此操作的代码稍后将在同一controller函数中写入：

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

我的想法是，由于此代码是在指令的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>'
);

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

1 个答案: