Benutzerdefinierte Anweisung unter NG-Wiederholung funktioniert nicht

Question

Ich bin neu Bie in eckigen js, ich versuche, ein Überlaufmenü von Kohlenstoff-Komponenten bereitgestellt, d. H. https://github.com/carbon-design-system/carbon-components/tree/master/src/components.

Wenn ich meine benutzerdefinierte Anweisung nicht unter ng-wiederholen, funktioniert es gut. Aber wenn ich es unter ng-wiederhole, ist es fehlgeschlagen. Wenn ich versuche, es in HTML zu konsumieren, ist das Überlaufmenü nicht Anzeige. Bitte schlage vor, was mir hier fehlt.

Answer 1

Kohlenstoffkomponenten in dynamisch erstellten DOM-Elementen (z. B. Überlaufmenü in Ihrem Fall) müssen manuell instanziiert/freigegeben werden. Eine manuelle Instanziierung kann z.B. const instance = CarbonComponents.OverflowMenu.create(theElementOfOverflowMenu) und Freigabe kann durch overflowMenuInstance.release() erfolgen. Wenn Sie eine Direktive mit einem Überlaufmenü darin haben - Ihre Anweisung sollte den .create() Anruf in link() und den .release() Anruf in $destroy Ereignishörer haben. Hier ein Beispiel:

angular.module('app', []) 
 
    .controller('MyAppController', function ($scope) { 
 
    $scope.myArray = [{}, {}, {}]; 
 
    }) 
 
    .directive('myOverflowMenu', function() { 
 
    return { 
 
     restrict: 'E', 
 
     template: [ 
 
     '<div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">', 
 
     '<svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">', 
 
     '<circle cx="2" cy="2" r="2"></circle>', 
 
     '<circle cx="2" cy="10" r="2"></circle>', 
 
     '<circle cx="2" cy="18" r="2"></circle>', 
 
     '</svg>', 
 
     '<ul class="bx--overflow-menu-options">', 
 
     '<li class="bx--overflow-menu-options__option">', 
 
     '<button class="bx--overflow-menu-options__btn">Stop app</button>', 
 
     '</li>', 
 
     '<li class="bx--overflow-menu-options__option">', 
 
     '<button class="bx--overflow-menu-options__btn">Restart app</button>', 
 
     '</li>', 
 
     '</ul>', 
 
     '</div>' 
 
     ].join(''), 
 
     link: function (scope, element) { 
 
     const overflowMenu = CarbonComponents.OverflowMenu.create(element[0].querySelector('[data-overflow-menu]')); 
 
     scope.$on('$destroy', function() { 
 
      overflowMenu.release(); 
 
     }); 
 
     } 
 
    }; 
 
    });

<link rel="stylesheet" href="https://unpkg.com/carbon-components@7.4.4/css/carbon-components.css"> 
 
<script src="https://unpkg.com/carbon-components@7.12.1/scripts/carbon-components.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="MyAppController"> 
 
    <div ng-repeat="item in myArray"> 
 
    <my-overflow-menu></my-overflow-menu> 
 
    </div> 
 
</div>