thienhung1989 / angular-tree-dnd

Display tree table (or list) & event Drap & Drop (allow drag multi tree-table include all type: table, ol, ul) by AngularJS
http://thienhung1989.github.io/angular-tree-dnd/
MIT License
144 stars 81 forks source link

Does not work when using webpack #67

Open umdstu opened 6 years ago

umdstu commented 6 years ago

When you use webpack, you no longer have a specific (template) file to point to. This means that when angular-tree-dnd templateUrl is set to a template file path, it will return a 404.

I've gotten your library to work by first storing my custom dnd template (From your example) in the template cache when the controller spins up:

.run(["$templateCache", function ($templateCache) {
        $templateCache.put("/components/app/tree-dnd-template-render.html", require('./components/app/tree-dnd-template-render.html'));
    }]);

then next updating your library's template-url function to first check the $templateCache for the data before attempting a GET request:

if ($templateCache.get(attrs.templateUrl)) {
    var data     = $templateCache.get(attrs.templateUrl) || '';
    data         = angular.element(data.trim());
    promiseCheck = checkTreeTable(data, scope);
    if (angular.isObject(promiseCheck)) {
        promiseCheck.then(function () {
            element.append($compile(data)(scope));
        });
    } else {
        element.append($compile(data)(scope));
    }
} else {
    $http.get(
        attrs.templateUrl || $TreeDnDTemplate.getPath(),
        {cache: $templateCache}
    ).then(function (response) {
            var data     = response.data || '';
            data         = angular.element(data.trim());
            promiseCheck = checkTreeTable(data, scope);
            if (angular.isObject(promiseCheck)) {
                promiseCheck.then(function () {
                    element.append($compile(data)(scope));
                });
            } else {
                element.append($compile(data)(scope));
            }
        }
    );
}

It's not the most elegant, but you get the idea I think. I'm sure you can do a better job, but would you consider supporting something like this?

Either way, Thanks for your hard work on this project!

umdstu commented 6 years ago

Unfortunately this doesn't completely solve the problem. Although doing this renders the template correctly, and the data in the table, there are still issues with: ng-class, ng-style, and ng-model.

All ng-class and ng-style attributes need to be wrapped in curly braces to get them to render properly. For example:

<td ng-repeat="col in colDefinitions" ng-class="{{col.cellClass}}" ng-style="{{col.cellStyle}}"
    compile="col.cellTemplate">
    {{node[col.field]}}
</td>

However, this does not fix ng-model's or the ng-* elements inside the templates defined in the controller. And for that I am not sure how to fix without serious changes.