JavaScript function not working after minification

Question

I am using a function to trigger a modal windows.

The link:

<a ng-click="toggleModal()" href>complexity</a>

toggles a boolean:

$scope.showModal = false;
  $scope.toggleModal = function(){
    $scope.showModal = !$scope.showModal;
  };

that triggers the modal window:

.directive('modal', function () {
    return {
      template: '<div class="modal fade">' +
          '<div class="modal-dialog">' +
            '<div class="modal-content">' +
              '<div class="modal-header">' +
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                '<h4 class="modal-title">{{ title }}</h4>' +
              '</div>' +
              '<div class="modal-body" ng-transclude></div>' +
            '</div>' +
          '</div>' +
        '</div>',
      restrict: 'E',
      transclude: true,
      replace:true,
      scope:true,
      link: function postLink(scope, element, attrs) {
        scope.title = attrs.title;

        scope.$watch(attrs.visible, function(value){
          if(value === true) {
            $(element).modal('show');
          } else {
            $(element).modal('hide');
          }
        });

        $(element).on('shown.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = true;
          });
        });

        $(element).on('hidden.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = false;
          });
        });
      }
    };
  })

Everything works fine as long as I don't minify the code. No errors from the console: ~~using some breakpoints I noticed that clicking on the link the value doesn't become true~~. Any idea about why that's happening?

UPDATE 1: this is the minified bit of the directive above:

.directive("modal",function(){return{template:'<div class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">{{ title }}</h4></div><div class="modal-body" ng-transclude></div></div></div></div>',restrict:"E",transclude:!0,replace:!0,scope:!0,link:["scope","element","attrs",function(a,b,c){a.title=c.title,a.$watch(c.visible,function(a){$(b).modal(a===!0?"show":"hide")}),$(b).on("shown.bs.modal",function(){a.$apply(function(){a.$parent[c.visible]=!0})}),$(b).on("hidden.bs.modal",function(){a.$apply(function(){a.$parent[c.visible]=!1})})}]}})

This is the toggle:

b.showModal=!1,b.toggleModal=function(){b.showModal=!b.showModal}

UPDATE 2: I further tested the code adding an alert in the toggle function. The variable is actually toggled to true but the modal box does not appear.

Are you aware of the issues with Angular's DI mechanism and minification? It's documented here. — robertklep
– robertklep, Commented Apr 11, 2015 at 7:46
Hi both, ngAnnotate is part of the building process. I also run ngAnnotate on the files after reading your comment, but it didn't apply any changes. — Mirko G.
– Mirko G., Commented Apr 11, 2015 at 11:53

Scott McClung · Accepted Answer · 2015-04-19 15:02:18Z

1

Had the same issue with the same pattern.
In my case, the 'visible' attribute assignment on the modal element was being replaced in the html during the build/minification process so there was no 'visible' attribute being passed in to the directive.

Before build/minification:

<modal title="my title here" visible="showModal"></modal>

After build/minification:

<modal title="my title here" visible></modal>

To fix I just changed the 'visible' attribute name in the element and the link function to something else and it behaved as expected.

answered Apr 19, 2015 at 15:02

Scott McClung

1601 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gerardo Over a year ago

Great answer. You save my day

Joshua Arvin Lat · Accepted Answer · 2015-04-11 07:58:15Z

0

You can use ng-annotate which you can find here:

https://github.com/olov/ng-annotate

Here's a couple of tutorials on how to use ng-annotate:

http://labs.qandidate.com/blog/2014/09/02/minifying-an-existing-angularjs-project/
http://bartwullems.blogspot.com/2014/10/angularjs-using-ngannotate-inside.html

answered Apr 11, 2015 at 7:58

Joshua Arvin Lat

1,0399 silver badges8 bronze badges

1 Comment

Mirko G. Over a year ago

Hi, thanks for your answer, I am already using ngAnnotate. Do you see anything that ngAnnotate missed in that code?

Collectives™ on Stack Overflow

JavaScript function not working after minification

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related