本文介绍了如何在嵌套指令中使用ng-sortable的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好





我想在嵌套指令中使用ng-sortable。我总是得到错误:错误:多个指令[collection,ngSortable]要求隔离范围。这是否可能?





我的代码:



Hi


I want to use ng-sortable in a nested directives. I always get the error: Error: Multiple directives [collection, ngSortable] asking for isolated scope. Is this even possible ?


My code :

<!doctype html>
<html ng-app='APP'>
	<head>
<meta name="description" content="Angular Nested recursive directives" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
	<!-- AngularJS -->

  <!-- Sortable.js -->
  
 <!-- AngularJS -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

  <!-- Sortable.js -->
  <script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>

  <!-- ng-sortable.js -->
  <script src="http://rubaxa.github.io/Sortable/ng-sortable.js"></script>

  </head>
	<body>
		<div>
			<collection collection="tasks">
		</div>
	</body>
</html>










angular.module('APP', ['ng-sortable'])

.directive('collection', function () {
	return {
		restrict: "E",
		replace: true,
		scope: {
			collection: '='
		},
		template: "<ul><member ng-repeat="member in collection" member="member"></ul>"
	}
})

.directive('member', function ($compile) {
	return {
		restrict: "E",
		replace: true,
		scope: {
			member: '='
		},
		template: "<li>{{member.name}}</li>",
		link: function (scope, element, attrs) {
            var collectionSt = '<collection collection="member.children">';
			if (angular.isArray(scope.member.children)) {       
              
                $compile(collectionSt)(scope, function(cloned, scope)   {
  	  	     	  	element.append(cloned); 
  	  	  	  	  });
			}
		}
	}
})
 
.controller('IndexCtrl', function ($scope) {
	$scope.tasks = [
		{
			name: 'Europe',
			children: [
				{
					name: 'Italy',
					children: [
						{
							name: 'Rome'
						},
						{
							name: 'Milan'
						}
					]
				}, 
				{
					name: 'Spain'
				}
			]
		}, 
		{
			name: 'South America',
			children: [
				{
					name: 'Brasil'
				},
				{
					name: 'Peru'
				}
			]
		}
	];
});







JSBIN:



问候



我尝试过:



在html模板周围包含额外的div元素。




JSBIN :
JSBIN DEMO
Regards

What I have tried:

Wrapping extra div elements around the html template.

推荐答案




这篇关于如何在嵌套指令中使用ng-sortable的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-29 01:24