来自指令的剑道网格可编辑模板

Question

我正在尝试创建一个剑道网格 (angularjs)，并通过网格选项 editable.template 附加了一个个性化编辑器 <div my-directive-editor></div>。在我的指令编辑器（angularjs 指令）上，我从远程文件中指定 HTML 的结构并通过 templateUrl 链接它。运行应用程序后，当我第一次单击 添加新条目 时一切正常，但是当我取消弹出对话框并再次单击 添加新条目 时，将显示错误 $digest 已经在进行中 角格式。

我尝试改用 templateUrl 我使用模板并将整个 HTML 结构格式化为字符串并将其传递到那里，它运行良好，没有错误，但正如我所见，下一个开发人员很难管理非常长的 HTML 字符串，所以如果我可以将它分离到远程文件并将其链接到 templateUrl，那就太好了。我准备了一个道场来玩CLICK HERE TestTemplate.html 的内容是来自模板的 HTML 字符串。

这是我的指令

 app.directive('grdEditor',
   [          
    function () {
      return {
        restrict: 'A',
        replace: true,
        scope: {
          dataItem: '=ngModel'
        },
        //template: '<div><table><tr><td>Name</td><td><input ng-model="dataItem.Name" class="k-input k-textbox" /></td></tr><tr><td>Birthdate</td><td><input kendo-date-picker k-ng-model="dataItem.Birthdate" /></td></tr><tr><td>Gender</td><td><input kendo-combo-box k-ng-model="dataItem.Gender" k-options="optGender" /></td></tr></table></div>',
        templateUrl: 'http://localhost/Angular/TestTemplate.html',
        /*template: function(){
            return '<div><table><tr><td>Name</td><td><input ng-model="dataItem.Name" class="k-input k-textbox" /></td></tr><tr><td>Birthdate</td><td><input kendo-date-picker k-ng-model="dataItem.Birthdate" /></td></tr><tr><td>Gender</td><td><input kendo-combo-box k-ng-model="dataItem.Gender" k-options="optGender" /></td></tr></table></div>';
        },*/
        controller: function ($scope, $attrs, $timeout) {
          $scope.optGender = {
            dataTextField: 'Text',
            dataValueField: 'Value',
            dataSource: 
            {
                data: [
                {
                    Text: 'Male', 
                    Value: 1
                }, 
                {
                    Text: 'Female', 
                    Value: 2
                }]
            }
          };
        }
      };
    }
  ]);

这是我的剑道网格选项（部分）

 $scope.optGrid = {
              editable: {
                mode: "popup",
                window: {
                    minHeight: '320px',
                    minWidth: '365px',
            },
                template: '<div grd-editor ng-model="dataItem"></div>',
            },
            toolbar: ['create', 'excel'],
            excel: {
                allPages: true
            },
 .....................

任何帮助将不胜感激。

TIA

Answer 1

我认为templateUrl 有问题。你不需要给http:// 您只需要提供您的基本目录或 index.html 目录的路径