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>
<!--
<!--
<!--
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!--
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<!--
<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 :
JSBIN DEMO
Regards
What I have tried:
Wrapping extra div elements around the html template.
Submit an article or tip