Question

我想在嵌套指令中使用ng-sortable。我总是得到错误：错误：多个指令[collection，ngSortable]要求隔离范围。这甚至可能吗？

  <!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: "&lt;ul>&lt;member ng-repeat="member in collection" member="member">&lt;/ul>"
    }
})
 
.directive('member', function ($compile) {
    return {
        restrict: "E",
        replace: true,
        scope: {
            member: '='
        },
        template: "&lt;li>{{member.name}}&lt;/li>",
        link: function (scope, element, attrs) {
            var collectionSt = '&lt;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 demo

注意并感谢！

如何在嵌套指令中使用ng-sortable

0 个答案: