在指令[AngularJS]

时间:2015-06-19 13:59:25

标签: javascript angularjs

我正在创建一个基本页面,显示并允许您编辑/添加/删除树的子项。我已经制作了一个递归指令来打印它们,但我真的很困惑我应该如何去除一个数组元素,因为我需要知道它的父调用splice。 任何帮助真的很感激,现在已经抓了几个小时:/ 我应该将父元素作为属性传递吗?

app.controller('treeController', ['$scope', function($scope)
{
    //Root object
    $scope.tree =  {
        name : "Root",
        expand : true,
        children : []
    };

    //Temp data filler.
    $scope.fillData = function()
    {
        var child1 = {
            name : "Element 1",
            expand : false,
            children : []
        };
        var child2 = {
            name : "Element 2",
            expand : false,
            children : []
        };

        var subChild1 = {
            name : "Child 1",
            expand : false,
            children : []
        };

        var subChild2 = {
            name : "Child 2",
            expand : false,
            children : []
        };

        var grandChild1 = {
            name : "grandChild 1",
            expand : false,
            children : []
        };

        var grandChild2 = {
            name : "grandChild 2",
            expand : false,
            children : []
        };

        // Add the children
        $scope.tree.children.push(child1);
        $scope.tree.children.push(child2);

        $scope.tree.children[0].children.push(subChild1);
        $scope.tree.children[1].children.push(subChild1);
        $scope.tree.children[0].children.push(subChild2);
        $scope.tree.children[1].children.push(subChild2);

        $scope.tree.children[0].children[0].children.push(grandChild1);
        $scope.tree.children[0].children[1].children.push(grandChild1);
        $scope.tree.children[1].children[0].children.push(grandChild1);
        $scope.tree.children[1].children[1].children.push(grandChild1);
        $scope.tree.children[0].children[0].children.push(grandChild2);
        $scope.tree.children[0].children[1].children.push(grandChild2);
        $scope.tree.children[1].children[0].children.push(grandChild2);
        $scope.tree.children[1].children[1].children.push(grandChild2);
    }
}]);

app.directive('collection', function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            collection: '='
        },
        template: "<ul><member ng-repeat='member in collection.children' member='member'></member></ul>"
    }
})


app.directive('member', function ($compile) {
    return {
        restrict: "E",
        replace: true,
        scope: {
            member: '='
        },
        //template: "<li></li>",
        templateUrl: 'node.html',
        link: function (scope, element, attrs) {
            var collectionSt = '<collection collection="member"></collection>';

            //check if this member has children
            if (angular.isArray(scope.member.children))
            {
                $compile(collectionSt)(scope,
                    function(cloned, scope)
                    {
                        element.append(cloned);
                    });
            }

            scope.deleteMe = function(index)
            {
                //var index = array.indexOf(member);
                alert(array.indexOf($scope.member))
            };
        }
    }
});

0 个答案:

没有答案