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下的自定義指令不起作用

回答

相關問題