Question

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

我尝试使用 templateUrl 我使用模板并将整个HTML结构格式化为字符串并将其传递到那里并且它没有错误但是正如我所看到的，对于下一个开发人员来说很难管理非常长的HTML字符串，如果我可以将它分离到远程文件并将其链接到 templateUrl ，那就太棒了。我准备了一个dojo来玩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
                }]
            }
          };
        }
      };
    }
  ]);

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

 $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的基目录或目录中提供路径

Kendo网格可编辑模板来自指令

1 个答案: