Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Javier De Mauri 3 posts 75 karma points
    Oct 13, 2016 @ 19:06
    Javier De Mauri
    0

    Adding angular module to backoffice

    I'm using Umbraco 7.5.3 I need to add an angular module to extend backoffice functionality, for example, an autocomplete: https://github.com/angular-ui/ui-select/

    Doing quite some research, the best approach is described in this post: https://our.umbraco.org/forum/umbraco-7/developing-umbraco-7-packages/47905-Including-an-angular-module#comment-209557

    But that basically won't work. Is this maybe a problem with Umbraco 7.5.3? Is there any way to accomplish this?

  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Oct 14, 2016 @ 06:46
    Michaël Vanbrabandt
    0

    Hi Javier,

    can you show us what you have tried that doesn't work? Then we can see if you made a mistake or what the problem can be.

    /Michaël

  • Javier De Mauri 3 posts 75 karma points
    Oct 14, 2016 @ 12:53
    Javier De Mauri
    2

    Hi Michaël,

    Thanks for your reply. I'm following this steps:

    a) Adding the resources to my backend manifest, for example:

    {
        javascript: [
            '~/App_Plugins/Backend/backoffice/BackendTree/Scripts/products.controller.js',
            '~/App_Plugins/Backend/backoffice/BackendTree/Scripts/categories.controller.js',
            '~/App_Plugins/Backend/backoffice/BackendTree/Scripts/backend.resource.js',
            '~/App_Plugins/Backend/backoffice/BackendTree/Scripts/node_modules/ui-select/dist/select.js'
        ],
        css: [
            '~/App_Plugins/Backend/backoffice/BackendTree/Scripts/node_modules/ui-select/dist/select.css'
        ]
    }
    

    b) Try to add the module to the umbraco app, in my angular controller:

    var app = angular.module("umbraco");
    
    app.requires.push('ui.select');
    app.requires.push('ngSanitize');
    
    app.controller("Backend.CategoryController",
        function ($scope, $routeParams, backendResource, notificationsService, navigationService, dialogService, $location) {
            $scope.loaded = false;
        ...
    

    c) Try to use the module in my view, for example:

            <ui-select id="parentId" ng-model="model.parentId">
                <ui-select-choices repeat="c in (categories | filter: $select.search) track by c.CategoryId">
                    <span ng-bind="c.Name"></span>
                </ui-select-choices>
            </ui-select>
    

    I tried to use other modules also to ckeck that this wasn't a problem with a specific angular module.

  • Joe Mitchard 1 post 71 karma points
    Jan 04, 2017 @ 12:31
    Joe Mitchard
    0

    Hi Javier,

    I've run into the same problem as you have here, did you find a solution to this?

  • Javier De Mauri 3 posts 75 karma points
    Jan 04, 2017 @ 13:46
    Javier De Mauri
    0

    Hi Joe,

    Actually I didn't. From time to time I google for more options, but never succeeded.

  • David Peck 690 posts 1896 karma points c-trib
    Jan 04, 2017 @ 15:04
    David Peck
    0

    I take it that changing the order of the JS files in the manifest makes no odds. it strikes me that the page needs to know about the modules before the controllers are created... but I'm no authority on AngularJS

  • Sotiris Filippidis 286 posts 1501 karma points
    Aug 31, 2018 @ 22:58
    Sotiris Filippidis
    0

    I tried to do the exact same thing today, bumped into this discussion while searching. Is there any chance we've got some more news on that? (Although it's a couple of years now).

Please Sign in or register to post replies

Write your reply to:

Draft