ng-repeat下的自定义指令不起作用

我是角度js中的新bie，我试图实现由碳组件提供的溢出菜单，即https://github.com/carbon-design-system/carbon-components/tree/master/src/components。ng-repeat下的自定义指令不起作用

如果我不在ng-repeat下放置mycustom指令，它工作正常。但是，如果我把它放在ng下 - 重复它是失败的。当我尝试在HTML中使用它时，溢出菜单不是显示。请建议我在这里失踪。

来源

2017-05-04 user7893917

您可以发布您的代码吗？ Pastebin/jsfiddle等，它可以帮助人们看到发生了什么问题。 – rrd

动态创建的DOM元素（例如您的案例中的溢出菜单）中的碳元素需要手动实例化/发布。手动实例化可以通过例如const instance = CarbonComponents.OverflowMenu.create(theElementOfOverflowMenu)并且发布可以通过overflowMenuInstance.release()完成。鉴于你有一个指令，其中有一个溢出菜单 - 你的指令应该在link()和.release()调用$destroy事件监听器有.create()调用。这里有一个例子：

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/[email protected]/css/carbon-components.css"> 
 
<script src="https://unpkg.com/[email protected]/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>

来源

2017-06-24 09:44:44 asudoh

ng-repeat下的自定义指令不起作用

回答

相关问题