Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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 ng-controller="IndexCtrl">
            <collection collection='tasks'></collection>
        </div>
    </body>
</html>
 
​
 
angular.module('APP', ['ng-sortable'])
​
.directive('collection', function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            collection: '='
        },
        template: "<ul ng-sortable='{animation:150}' ><member ng-repeat='member in collection' member='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"></collection>';
            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'
                }
            ]
        }
    ];
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers