本文介绍了如何在嵌套指令中使用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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!