Copied to clipboard

Flag this post as spam?

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


  • Zakhar 171 posts 397 karma points
    Feb 17, 2016 @ 11:41
    Zakhar
    0

    ClientDependency breaks my angularJS custom field editor controller

    Hey guys, I have umbraco 7.3.7 and I have this simple angularJS controller for one of my custom field editors:

    angular.module("umbraco")
        .controller("MultiCompanyPickerController",
        ['$scope', 'CompanyDataService', function ($scope, CompanyDataService) {
    
            $scope.palCompanies = [];
            $scope.palSelectedItem = {};
    
            $scope.palAddToList = palAddToList;
            $scope.palRemoveFromList = palRemoveFromList;
    
            CompanyDataService.getCompanies()
                .then(function (data) {
                    return $scope.palCompanies = data.data;
                });
    
            function palAddToList() {
                $scope.model.value.push($scope.palSelectedItem);
            }
    
            function palRemoveFromList(index) {
                $scope.model.value.splice(index, 1);
            }
    
        }]);
    

    The editor renders select control and add selected items to list. It works perfectly fine when I have debug set to true in my web.config:

    <compilation defaultLanguage="c#" debug="true" batch="false" targetFramework="4.5">
    

    However, it breaks if I set debug="false". In this case the list of companies is not loading, but I also experienced other weird behaviour in other controllers such as resetting the $scope.model to null on trying to update the value and so forth.

    I guess it has to do with minification and concatenation which is done to my code.

    Has anyone experience something similar? Any tips how to fix it and avoid in the future?

  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Feb 17, 2016 @ 12:55
    Dan Diplo
    1

    I've had similar issues, though they only occurred with JavaScript that I'd minified manually before it was "compressed" by the Client Dependency.

    But there is a way of writing Angular so it's more robust when minified. See:

    http://frontendcollisionblog.com/javascript/angularjs/2015/03/31/something-no-one-tells-you-about-minifying-angularjs-controllers-until-its-too-late.html

    http://www.codelord.net/2015/11/18/the-deal-with-angular-and-minification/

  • Simon Dingley 1470 posts 3427 karma points c-trib
    Apr 10, 2018 @ 07:09
    Simon Dingley
    0

    Thanks for sharing this Dan, I've just been caught by it and couldn't for the life of me work out why this worked in test and staging but not in production.

    I might look at implementing this npm module for future builds:

    https://github.com/schmod/babel-plugin-angularjs-annotate

    Simon

  • Zakhar 171 posts 397 karma points
    Feb 17, 2016 @ 13:32
    Zakhar
    0

    Thanks Dan,

    I already inject dependencies by wrapping them in the array. $inject has the same effect, it's just a style difference. I tried it but it's the same - still not working in the release mode.

Please Sign in or register to post replies

Write your reply to:

Draft