Question

我在这里使用这个自定义指令plnkr.co/edit/O3T7MJuwSvcG04CRvVWB它正在工作，但当我将整个事件粘贴到jsfiddle并将外部模板转换为内联时，它就无法正常工作。

这是内联模板的小代码片段

templateUrl: '<div class="dropdown searchable-multi-select" dropdown on-toggle="toggled(open)">
    <a class="dropdown-toggle btn btn-default" data-toggle="dropdown" dropdown-toggle data-target="#"
        tooltip="{{ commaDelimitedSelected() }}" ng-class="{'disabled': readOnly}">

        <span class="limit-ellipsis" ng-style="{ 'width' : width }">
            <small ng-class="{'text-muted': commaDelimitedSelected() === 'Nothing Selected'}">
                {{ commaDelimitedSelected() }}
            </small>
            <b class="caret" ng-if="!readOnly && allItems.length"></b>
        </span>
    </a>
    <ul ng-if="!readOnly && allItems.length" class="dropdown-menu dropdown-menu-form form-control" role="menu">
        <li><input type="text" class="form-control" ng-model="searchQuery" placeholder="Search"></li>
        <li ng-repeat="item in ::allItems track by $index"
            ng-hide="searchQuery.length && item[displayAttr].toLowerCase().indexOf(searchQuery.toLowerCase()) < 0">
            <label class="checkbox clickable" ng-click="updateSelectedItems(item)"
                ng-class="{'text-success': isItemSelected(item) }">

                {{ item[displayAttr] }}
                <span class="glyphicon glyphicon-remove pull-right clickable"
                    ng-show="isItemSelected(item)"></span>
            </label>
        </li>
    </ul>
</div>
',

是否有任何错误或缺少哪些代码无效。这里是完整的代码https://jsfiddle.net/tridip/xu7db29x/请看一下，告诉我我错过了哪些代码无效。

Answer 1

使用template代替templateUrl。 ;）

Answer 2

我整理了你的指令，这很多呻吟：

app.directive("searchableMultiselect", function($timeout) {
    return {
        template: '<div class="dropdown searchable-multi-select" dropdown on-toggle="toggled(open)">'+
        '<a class="dropdown-toggle btn btn-default" data-toggle="dropdown" dropdown-toggle data-target="#"'+
    'tooltip="{{ commaDelimitedSelected() }}" ng-class="{\'disabled\': readOnly}">'+

        '<span class="limit-ellipsis" ng-style="{ \'width\' : width }">'+
        '<small ng-class="{\'text-muted\': commaDelimitedSelected() === \'Nothing Selected\'}">'+
        '{{ commaDelimitedSelected() }}'+
    '</small>'+                           
    '<b class="caret" ng-if="!readOnly && allItems.length"></b>'+
        '</span>'+
        '</a>'+
        '<ul ng-if="!readOnly && allItems.length" class="dropdown-menu dropdown-menu-form form-control" role="menu">'+
        '<li><input type="text" class="form-control" ng-model="searchQuery" placeholder="Search"></li>'+
        '<li ng-repeat="item in ::allItems track by $index"'+
    'ng-hide="searchQuery.length && item[displayAttr].toLowerCase().indexOf(searchQuery.toLowerCase()) < 0">'+
        '<label class="checkbox clickable" ng-click="updateSelectedItems(item)"'+
    'ng-class="{\'text-success\': isItemSelected(item) }">'+

        '{{ item[displayAttr] }}'+
    '<span class="glyphicon glyphicon-remove pull-right clickable"'+
    'ng-show="isItemSelected(item)"></span>'+
        '</label>'+
        '</li>'+
        '</ul>'+
        '</div>',
    restrict: 'AE',
        scope: {
        displayAttr: '@',
            selectedItems: '=',
            allItems: '=',
            readOnly: '=',
            addItem: '&',
            removeItem: '&'
    },
    link: function(scope, element, attrs) {
        element.bind('click', function (e) {
            e.stopPropagation();
        });

        scope.width = element[0].getBoundingClientRect();

        scope.updateSelectedItems = function(obj) {
            var selectedObj;
            for (i = 0; typeof scope.selectedItems !== 'undefined' && i < scope.selectedItems.length; i++) {
                if (scope.selectedItems[i][scope.displayAttr].toUpperCase() === obj[scope.displayAttr].toUpperCase()) {
                    selectedObj = scope.selectedItems[i];
                    break;
                }
            }
            if ( typeof selectedObj === 'undefined' ) {
                scope.addItem({item: obj});
            } else {
                scope.removeItem({item: selectedObj});
            }
        };

        scope.isItemSelected = function(item) {
            if ( typeof scope.selectedItems === 'undefined' ) return false;

            var tmpItem;
            for (i=0; i < scope.selectedItems.length; i++) {
                tmpItem = scope.selectedItems[i];
                if ( typeof tmpItem !== 'undefined'
                    &&  typeof tmpItem[scope.displayAttr] !== 'undefined'
                    &&  typeof item[scope.displayAttr] !== 'undefined'
                    &&  tmpItem[scope.displayAttr].toUpperCase() === item[scope.displayAttr].toUpperCase() ) {
                    return true;
                }
            }

            return false;
        };

        scope.commaDelimitedSelected = function() {
            var list = "";
            angular.forEach(scope.selectedItems, function (item, index) {
                list += item[scope.displayAttr];
                if (index < scope.selectedItems.length - 1) list += ', ';
            });
            return list.length ? list : "Nothing Selected";
        }
    }
}
});

但是还有其他错误，请查看。至少现在有一个下降：

fiddle-dee-dee

带有内联模板的Angular自定义指令

2 个答案: