3

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.

Mirko G.
  • 107
  • 1
  • 11
  • 2
    Does this help? http://stackoverflow.com/questions/18782324/angularjs-minify-best-practice – Ilya Kogan Apr 11 '15 at 07:45
  • 1
    Are you aware of the issues with Angular's DI mechanism and minification? It's documented [here](https://docs.angularjs.org/guide/di). – robertklep Apr 11 '15 at 07: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. Apr 11 '15 at 11:53

2 Answers2

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.

Scott McClung
  • 160
  • 1
  • 3
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

Joshua Arvin Lat
  • 1,029
  • 9
  • 8
  • Hi, thanks for your answer, I am already using ngAnnotate. Do you see anything that ngAnnotate missed in that code? – Mirko G. Apr 11 '15 at 11:54