Angular benutzerdefinierte Direktiven mit Inline-Vorlage

Question

Ich arbeite mit dieser benutzerdefinierten Anweisung von hier plnrkr.co/edit/O3T7MJuwSvcG04CRvVWB es funktioniert, aber wenn ich die ganze Sache in jsfiddle einfügen und externe Vorlage in Inline konvertieren, dann funktioniert es nicht.

dies kleiner Code-Schnipsel von Inline-Vorlage

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> 
', 

wird jeder Fehler oder irgendetwas, für den Code fehlt nicht funktioniert. Hier ist der vollständige Code https://jsfiddle.net/tridip/xu7db29x/ Bitte schauen Sie und sagen Sie mir, was ich vermisse für welchen Code nicht funktioniert.

Answer 1

räumte ich Ihre Richtlinie auf, dass eine Menge stöhnte:

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

jedoch weitere Fehler gibt es, aber bitte einen Blick darauf werfen. Zumindest gibt es ein Drop-Down jetzt:

fiddle-dee-dee

Answer 2

Verwenden Sie template anstelle von templateUrl. ;)