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>

这是我控制器中的变种

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

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

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

当我运行咕噜声时，一切正常。当我运行grunt build时，指令显示表但不重复任何内容。该表保持空白。在缩小过程中会出现问题。我没有看到任何错误，但是当我禁用缩小时，一切仍然有效。任何人都知道为什么在缩小之后这不起作用？

Answer 1

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

Answer 2

根据arjabbar的建议，它是默认关键字。我重命名了它，现在一切正常，即使启用了htmlmin也是如此。

缩小后，指令不再起作用

2 个答案: