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

时间：2017-05-04 06:06:53

标签： javascript angularjs angularjs-directive

我是角度js的新bie，我正在尝试实现碳组件提供的溢出菜单，即https://github.com/carbon-design-system/carbon-components/tree/master/src/components。

如果我不把mycustom指令放在ng-repeat下，它运行正常。但如果我把它放在ng-repeat下面就会失败。 当我尝试在html中使用它时，溢出菜单不是 显示。请在这里建议我缺少的东西。

1 个答案:

答案 0 :(得分：0)

动态创建的DOM元素中的碳组件（例如，在您的情况下为溢出菜单）需要手动实例化/释放。手动实例化可以通过例如const instance = CarbonComponents.OverflowMenu.create(theElementOfOverflowMenu)可以overflowMenuInstance.release()发布.create()。如果您有一个带溢出菜单的指令 - 您的指令应该在link()中调用.release()，在$destroy事件侦听器中调用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(); }); } }; });。这是一个例子：

＆＃13;
＆＃13; 
<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>
＆＃13; 
{
	"variables": [],
	"info": {
		"name": "Test API",
		"_postman_id": "4f1fda5f-910c-71ac-0914-db2d0b9c6521",
		"description": "",
		"schema": "https://schema.getpostman.com/json/collection/v2.0.0/collection.json"
	},
	"item": [
		{
			"name": "Access Token",
			"request": {
				"url": "{{url}}/api/authorize/access_token",
				"method": "POST",
				"header": [],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "client_id",
							"value": "{{clientId}}",
							"type": "text"
						},
						{
							"key": "client_secret",
							"value": "{{clientSecret}}",
							"type": "text"
						},
						{
							"key": "grant_type",
							"value": "client_credentials",
							"type": "text"
						}
					]
				},
				"description": "Client Credentials for Postman"
			},
			"response": []
		},
		{
			"name": "Layout create",
			"request": {
				"url": "{{url}}/api/layout?envelope=1",
				"method": "POST",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "name",
							"value": "Postman layout",
							"type": "text"
						}
					]
				},
				"description": ""
			},
			"response": []
		},
		{
			"name": "Region create",
			"request": {
				"url": "{{url}}/api/region/24?envelope=1",
				"method": "POST",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "width",
							"value": "300",
							"type": "text"
						},
						{
							"key": "height",
							"value": "450",
							"type": "text"
						},
						{
							"key": "top",
							"value": "150",
							"type": "text"
						},
						{
							"key": "left",
							"value": "350",
							"type": "text"
						}
					]
				},
				"description": ""
			},
			"response": []
		},
		{
			"name": "Library Upload",
			"request": {
				"url": "{{url}}/api/library",
				"method": "POST",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "files",
							"value": "",
							"type": "file"
						},
						{
							"key": "name",
							"value": "API UPLOAD",
							"type": "text"
						},
						{
							"key": "oldMediaId",
							"value": "249",
							"type": "text",
							"disabled": true
						},
						{
							"key": "updateInLayouts",
							"value": "1",
							"type": "text",
							"disabled": true
						},
						{
							"key": "deleteOldRevisions",
							"value": "1",
							"type": "text",
							"disabled": true
						}
					]
				},
				"description": ""
			},
			"response": []
		},
		{
			"name": "Playlist Library Assign",
			"request": {
				"url": "{{url}}/api/playlist/library/assign/177",
				"method": "POST",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "media[]",
							"value": "134",
							"type": "text"
						}
					]
				},
				"description": "\n"
			},
			"response": []
		},
		{
			"name": "Action: Change Layout",
			"request": {
				"url": "{{url}}/api/displaygroup/2/action/changeLayout?envelope=1",
				"method": "POST",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "layoutId",
							"value": "24",
							"type": "text"
						},
						{
							"key": "downloadRequired",
							"value": "true",
							"type": "text"
						},
						{
							"key": "changeMode",
							"value": "queue",
							"type": "text"
						}
					]
				},
				"description": "Root Request\n"
			},
			"response": []
		},
		{
			"name": "Action: Overlay Layout",
			"request": {
				"url": "{{url}}/api/displaygroup/28/action/overlayLayout?envelope=1",
				"method": "POST",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "layoutId",
							"value": "73",
							"type": "text"
						},
						{
							"key": "downloadRequired",
							"value": "true",
							"type": "text"
						},
						{
							"key": "duration",
							"value": "10",
							"type": "text"
						}
					]
				},
				"description": "Root Request\n"
			},
			"response": []
		},
		{
			"name": "Layouts",
			"request": {
				"url": "{{url}}/api/layout?layout=&embed=regions,playlists",
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "client_id",
							"value": "{{clientId}}",
							"type": "text"
						},
						{
							"key": "client_secret",
							"value": "{{clientSecret}}",
							"type": "text"
						},
						{
							"key": "grant_type",
							"value": "client_credentials",
							"type": "text"
						}
					]
				},
				"description": "\n"
			},
			"response": []
		},
		{
			"name": "DisplayGroups",
			"request": {
				"url": "{{url}}/api/displaygroup",
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "access_token",
							"value": "{{access_token}}",
							"type": "text"
						}
					]
				},
				"description": "\n"
			},
			"response": []
		},
		{
			"name": "Displays",
			"request": {
				"url": "{{url}}/api/display",
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "client_id",
							"value": "lqDQiJiv8lEWi9TTddSgTGb8aIod0OLpLWP0ipnn",
							"type": "text"
						},
						{
							"key": "client_secret",
							"value": "gKtQM7Jnt02LpnRyknuUyI7pI7xmlvW5M9bZ7LVtxC7gLzNp1IXUMfGvVNmdeoEFVkTVhKEmaIGKl9RtpnhqlVb71oq32443VuHYQgQdHvfr2iTgdN4x10Xig87QM47P2CQXQ5gn6Y6XpKuLq27flNDUtsHEyWiTirQL3HcUipL8dEbBwJzLvqDmzFoq7Q83MWs8TDkcVIuolx5qWLdeN7YLwV6liAa2gR0egmc5yUQkCGMxzx4bhGVMDywAfa",
							"type": "text"
						},
						{
							"key": "grant_type",
							"value": "client_credentials",
							"type": "text"
						}
					]
				},
				"description": "\n"
			},
			"response": []
		},
		{
			"name": "Request Screenshot",
			"request": {
				"url": "{{url}}/api/display/requestscreenshot/33?envelope=1",
				"method": "PUT",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {},
				"description": ""
			},
			"response": []
		},
		{
			"name": "Media",
			"request": {
				"url": "{{url}}/api/library?media=API",
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}",
						"description": ""
					}
				],
				"body": {},
				"description": ""
			},
			"response": []
		}
	]
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题