如何在嵌套指令中使用ng-sortable [英] How to use ng-sortable in nested directives
本文介绍了如何在嵌套指令中使用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:
JSBIN DEMO
问候
我尝试过:
在html模板周围包含额外的div元素。
JSBIN :
JSBIN DEMO
Regards
What I have tried:
Wrapping extra div elements around the html template.
推荐答案
compile){
return {
restrict: E,
替换: true ,
范围:{
成员:' ='
},
模板: < li> {{member.name}}< / li>,
link : function (范围,元素,attrs){
var collectionSt = ' &l t;集合集合=member.children>';
if (angular.isArray(scope.member.children)){
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)(范围, function (克隆,范围){
element.append(cloned);
});
}
}
}
})
.controller(' IndexCtrl', function (
compile(collectionSt)(scope, function(cloned, scope) { element.append(cloned); }); } } } }) .controller('IndexCtrl', function (
scope){
这篇关于如何在嵌套指令中使用ng-sortable的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文