指令在缩小后不再起作用。

Question

我有这样的指令：

var tonicswitch = angular.module('tonicswitch', []).directive('multiSelectTonics', function(){
    return {
        restrict: 'E',
        scope: {
            items: '=',
            default: '=',
            leftTitle: '@',
            rightTitle: '@'
        },
        templateUrl: "views/tonicswitch.html",
        link: function(scope)   {
            scope.switchItem = function(item)   {
                var index = scope.default.indexOf(item);
                if(index == -1) {
                    console.log("Add tonic");
                    scope.default.push(item);
                } else {
                    console.log("Remove tonic");
                    scope.default.splice(index, 1);
                }
            }
        }
    };
})

tonicswitch.directive('switchtonic', function() {
    return {
        restrict: 'E',
        scope: {
            value: '='
        },
        template: '<div>{{value}}</div>'
    };
});

HTML如下所示：

<style>
    .switchBox .entBox {
        overflow:auto;
        height:500px; 
        width:350px;
        border:1px solid black;
        float:left;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        padding: 10px;
    }
    .switchBox .entBox div:hover {
        background-color: #00FF03;
    }
    .switchBox .eBox2.entBox div:hover {
        background-color: #FF0007;
    }

    switchtonic {
        display: block;
        margin-top: 5px;
    }

    switchtonic:first-child {
        margin-top: 0;
    }
</style>

<label>
    <table>
        <tr>
            <th>{{leftTitle}}</th>
            <th>{{rightTitle}}</th>
        </tr>
        <tr class="switchBox">
            <td>
                <div class="entBox eBox1">
                    <switchtonic ng-repeat="(key, value) in items" ng-if="default.indexOf(key) == -1" value="value.getName()" ng-click="switchItem(key)"></switchtonic>
                </div>
            </td>
            <td>
                <div class="entBox eBox2">
                    <switchtonic ng-repeat="(key, value) in items" ng-if="default.indexOf(key) > -1" value="value.getName()" ng-click="switchItem(key)"></switchtonic>
                </div>
            </td>
        </tr>
    </table>
</label>

在我的app.js中，我向我的模块添加了如下指令：

angular
  .module('Gins', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'parse-angular',
    'parse-angular.enhance',
    'ngDialog',
    'typeswitch',
    'tonicswitch'
  ])

我在html中使用了以下指令：

<multi-select default="selectedTypesNL" items="listOfAllNLTypes" left-title="All Types" right-title="Picked Types"></multi-select>

这是我的控制器里的vars

$scope.selectedTypesNL = [];
$scope.listOfAllNLTypes = {};

当我收到我的物品时，我会这样做：

for(var indexAllTypes = 0; indexAllTypes < $scope.types.length; indexAllTypes++){
    $scope.listOfAllNLTypes[$scope.types[indexAllTypes].getType()] = $scope.types[indexAllTypes];
}

我刚开始发球的时候一切都很好。当我运行grunt构建时，指令将显示表，但不会重复任何内容。桌子一直空着。在细化的过程中，有些地方出了问题。我没有看到任何错误，但当我禁用小型化，一切仍然有效。有人知道为什么这在缩小之后不起作用吗？

Answer 1

正如arjabbar所建议的那样，它是默认关键字。我重命名了它，现在即使启用了htmlmin，一切都很好。

Answer 2

非常奇怪，但是当我在构建任务中禁用htmlmin时，在我的grunt文件中，一切都正常。