Question

我正在使用一个函数来触发模态窗口。

链接：

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

切换布尔值：

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

触发模态窗口：

.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;
          });
        });
      }
    };
  })

只要我不缩小代码，一切正常。控制台没有错误：~~使用一些断点我注意到点击链接后值不会变为真~~。知道为什么会这样吗？

更新1 ：这是上述指令的缩小位：

.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})})}]}})

这是切换：

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

更新2 ：我进一步测试了在切换功能中添加警报的代码。该变量实际上切换为true，但模态框不会出现。

Answer 1

同样的问题有相同的模式。
就我而言，可见＆＃39;在构建/缩小过程中，在html中替换了模态元素上的属性赋值，因此没有可见的＆＃39;属性被传递给指令。

在构建/缩小之前：

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

构建/缩小后：

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

为了解决这个问题，我刚刚修改了“可见”字样。元素中的属性名称和其他东西的链接函数，它的行为符合预期。

Answer 2

你可以使用ng-annotate，你可以在这里找到：

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

这里有几个关于如何使用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

缩小后JavaScript函数不起作用

2 个答案: