如何添加AngularJS DHTML指令？

Question

dhtml语法帮助这是使用的语法

here...

• however配置和dataLoaded回调允许用户

• 添加他们想要的

的任何附加配置。

​

"use strict";
angular.module('dhxDirectives')
  .directive('dhxGrid', function factory(DhxUtils) {
    return {
      restrict: 'E',
      require: 'dhxGrid',
      controller: function () {
      },
      scope: {
        /**
         * Grid will be accessible in controller via this scope entry
         * after it's initialized.
         * NOTE: For better design and testability you should use instead the
         * configure and dataLoaded callbacks.
         */
        dhxObj: '=',
        /** Mandatory in current implementation! */
        dhxMaxHeight: '=',
        /** Optional. Default is 100%. */
        dhxMaxWidth: '=',
        /**
         * Data is given here as an object. Not a filename! Must conform to the
         * specified or default dataFormat
         */
        dhxData: '=',
        /**
         * View possible formats here: http://docs.dhtmlx.com/grid__data_formats.html
         * Currently supported:
         * ['Basic JSON', 'Native JSON'] // 'Basic JSON' is default value
         */
        dhxDataFormat: '=',
        /** Optional! Recommended! http://docs.dhtmlx.com/api__dhtmlxgrid_setheader.html */
        dhxHeader: '=',
        /** Optional! http://docs.dhtmlx.com/api__dhtmlxgrid_setcoltypes.html */
        dhxColTypes: '=',
        /** Optional! http://docs.dhtmlx.com/api__dhtmlxgrid_setcolsorting.html */
        dhxColSorting: '=',
        /** Optional! http://docs.dhtmlx.com/api__dhtmlxgrid_setcolalign.html */
        dhxColAlign: '=',
        /** Optional! http://docs.dhtmlx.com/api__dhtmlxgrid_setinitwidthsp.html */
        dhxInitWidths: '=',
        /** Optional! http://docs.dhtmlx.com/api__dhtmlxgrid_setinitwidths.html */
        dhxInitWidthsP: '=',
        /**
         * preLoad and postLoad callbacks to controller for additional
         * customization power.
         */
        dhxConfigureFunc: '=',
        dhxOnDataLoaded: '=',
        /**
         * [{type: <handlerType>, handler: <handlerFunc>}]
         * where type is 'onSomeEvent'
         * Events can be seen at: http://docs.dhtmlx.com/api__refs__dhtmlxgrid_events.html
         * Optional
         */
        dhxHandlers: '=',
        dhxVersionId: '=',

        dhxContextMenu: '='
      },
      compile: function compile(/*tElement, tAttrs, transclude*/) {
        return function (scope, element/*, attrs*/) {
          var loadStructure = function () {
            $(element).empty();
            $('<div></div>').appendTo(element[0]);
            var rootElem = element.children().first();

            var width = scope.dhxMaxWidth ? (scope.dhxMaxWidth + 'px') : '100%';
            var height = scope.dhxMaxHeight ? (scope.dhxMaxHeight + 'px') : '100%';

            rootElem.css('width', width);
            rootElem.css('height', height);

            //noinspection JSPotentiallyInvalidConstructorUsage
            if (scope.dhxObj) {
              DhxUtils.dhxDestroy(scope.dhxObj);
            }
            scope.dhxObj = new dhtmlXGridObject(rootElem[0]);
            var grid = scope.dhxObj;

            grid.setImagePath(DhxUtils.getImagePath());

            grid.enableAutoHeight(!!scope.dhxMaxHeight, scope.dhxMaxHeight, true);
            grid.enableAutoWidth(!!scope.dhxMaxWidth, scope.dhxMaxWidth, true);


            scope.dhxContextMenu ? grid.enableContextMenu(scope.dhxContextMenu) : '';
            scope.$watch(
              "dhxContextMenu",
              function handle( newValue, oldValue ) {
                grid.enableContextMenu(newValue);
              }
            );

            scope.dhxHeader ? grid.setHeader(scope.dhxHeader): '';
            scope.dhxColTypes ? grid.setColTypes(scope.dhxColTypes): '';
            scope.dhxColSorting ? grid.setColSorting(scope.dhxColSorting): '';
            scope.dhxColAlign ? grid.setColAlign(scope.dhxColAlign): '';
            scope.dhxInitWidths ? grid.setInitWidths(scope.dhxInitWidths): '';
            scope.dhxInitWidthsP ? grid.setInitWidthsP(scope.dhxInitWidthsP): '';

            // Letting controller add configurations before data is parsed
            if (scope.dhxConfigureFunc) {
              scope.dhxConfigureFunc(grid);
            }

            grid.init();
            // Finally parsing data
            var dhxDataFormat = scope.dhxDataFormat || 'Basic JSON';
            switch (dhxDataFormat) {
              case 'Basic JSON':
                grid.parse(scope.dhxData, 'json');
                break;
              case 'Native JSON':
                grid.load(scope.dhxData, 'js');
                break;
            }

            // Letting controller do data manipulation after data has been loaded
            if (scope.dhxOnDataLoaded) {
              scope.dhxOnDataLoaded(grid);
            }

            DhxUtils.attachDhxHandlers(grid, scope.dhxHandlers);
            DhxUtils.dhxUnloadOnScopeDestroy(scope, grid);
          };
          scope.$watch('dhxVersionId', function (/*newVal, oldVal*/) {
            console.log('rebuilding...');
            loadStructure();
          });
        }
      }
    };
  });
© 2020 GitHub, Inc.

​

here...

• however配置和dataLoaded回调允许用户

• 添加他们想要的

的任何附加配置。

Answer 1

​

<dhx-grid
  dhx-obj="grid.obj"
  style="height: 100%"
  dhx-data="gridData"
  dhx-col-sorting="'str,str,int'"
  dhx-header="'Title,Author,Copies sold'"
  dhx-context-menu="contextMenu"
  dhx-handlers="grid.handlers"></dhx-grid>

​

Answer 2

​

angular.module('myApp')
  .controller('GridController', ['$scope' ,function ($scope) {
    $scope.grid = {
      obj: {},
      handlers: [
        {type: "onRowSelect", handler: function (id) {
          $scope.grid.obj.deleteRow(id);
        }}
      ]
    };

    $scope.alert = function alert(event_name) {
      switch (event_name) {
        case "refreshsize":
          $scope.grid.obj.setSizes();
      }
    };

    $scope.contextMenu = {};
    $scope.gridData = {
      rows:[
        { id:1, data: ["Click a row", "John Grasham", "100"]},
        { id:2, data: ["to have it", "Stephen Pink", "2000"]},
        { id:3, data: ["deleted", "Terry Brattchet", "3000"]},
        { id:4, data: ["La la la", "Isaac Zimov", "4000"]},
        { id:5, data: ["La la la", "Sax Pear", "5000"]}
      ]
    };
  }]);

​

Answer 3

​

"use strict";
/**
 * Created by Emanuil on 01/02/2016.
 */
angular.module('dhxDirectives')
  .factory('DhxUtils', [function () {
    var _imgPath = "bower_components/dhtmlx/imgs/";

    /**
     * @param dhxObject
     * @param dhxHandlers
     */
    var attachDhxHandlers = function (dhxObject, dhxHandlers) {
      (dhxHandlers || [])
        .forEach(function (info) {
          dhxObject.attachEvent(info.type, info.handler);
        });
    };

    var getImagePath = function () {
      return _imgPath;
    };

    var setImagePath = function (imgPath) {
      _imgPath = imgPath;
    };

    /**
     * I hope to never resort to using that
     */
    var createCounter = function () {
      var current = -1;
      return function () {
        current++;
        return current;
      };
    };

    var removeUndefinedProps = function(obj) {
      for (var prop in obj) {
        if (obj.hasOwnProperty(prop) && obj[prop] === undefined) {
          delete obj[prop];
        }
      }
    };

    var dhxDestroy = function (dhxObj) {
      var destructorName =
        'destructor' in dhxObj
          ? 'destructor'
          :
          ('unload' in dhxObj
            ? 'unload'
            : null);

      if (destructorName === null) {
        console.error('Dhtmlx object does not have a destructor or unload method! Failed to register with scope destructor!');
        return;
      }

      dhxObj[destructorName]();
    };


    var dhxUnloadOnScopeDestroy = function (scope, dhxObj) {
      var destructorName =
        'destructor' in dhxObj
          ? 'destructor'
          :
          ('unload' in dhxObj
            ? 'unload'
            : null);
      if (destructorName === null) {
        console.error('Dhtmlx object does not have a destructor or unload method! Failed to register with scope destructor!');
        return;
      }

      scope.$on(
        "$destroy",
        function (/*event*/) {
          dhxObj[destructorName]();
        }
      );
    };

    return {
      attachDhxHandlers: attachDhxHandlers,
      getImagePath: getImagePath,
      setImagePath: setImagePath,
      createCounter: createCounter,
      removeUndefinedProps: removeUndefinedProps,
      dhxUnloadOnScopeDestroy: dhxUnloadOnScopeDestroy,
      dhxDestroy: dhxDestroy
    };
  }]);

​