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.

Answer 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.