Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does not work when using webpack #67

Open
umdstu opened this issue Aug 18, 2018 · 1 comment
Open

Does not work when using webpack #67

umdstu opened this issue Aug 18, 2018 · 1 comment

Comments

@umdstu
Copy link

umdstu commented Aug 18, 2018

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
Copy link
Author

umdstu commented Aug 18, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant