I need some help with getting AngularJS to maintain my non-string values in directive attributes.

I was looking for a way to render a tree structure in HTML from a piece of JSON, and I found this code: /

I've been trying to adapt that for my project, as shown in the code below.

My controller/directive is shown here:

cxpControllers.controller("ProductTocCtrl", ["$scope", "$http", "$routeParams",
function ProductTocController($scope, $http, $routeParams) {
    $scope.typeOf = typeOf;

            //test value
    $scope.contents = {
        "id": 1,
        "name": "Test",
        subsections: [
            {
                id: 2,
                name: "Test1.1",
                link: "test11.xml",
                test: 34
            },
            {
                id: 3,
                name: "Test1.2",
                link: "test12.xml",
                test: 95
            }
        ]
    }

}]);

cxpControllers.directive('tree', function($pile) {
return {
    restrict: 'E',
    scope: {key: "=", content: "="},
    templateUrl: "tree_renderer.html",
    pile: function(tElement, tAttr) {
        var contents = tElement.contents().remove();
        var piledContents;
        return function(scope, iElement, iAttr) {
            if(!piledContents) {
                piledContents = $pile(contents);
            }
            piledContents(scope, function(clone, scope) {
                iElement.append(clone);
            });
        };
    }
};
});

And then this is my template:

<script type="text/ng-template" id="tree_renderer.html">
{{key}}:&nbsp;

<ul ng-if="typeOf(content) == 'object' && content != null">
    <li ng-repeat="(key, content) in content">
        <tree key="key" content="content"></tree>
    </li>
</ul>

<span ng-if="typeOf(content) != 'object'">
    "{{content}}"
</span>

</script>

<ul>
    <li ng-repeat="(key, content) in contents">
        <tree key="key" content="content"></tree>
    </li>
</ul>

This would work, except for one problem. Angular is turning the value of "content" into a string, preventing the recursion from working because it can't iterate over a string.

I have seen other questions like this, for example here, but their problem is that they used "@" in the directive scope, which converts to a string. But since I'm using "=", it should maintain the type.

Here's the output I'm seeing with the test data shown in the code above:

I would appreciate any help you can give. If you need more information I'll be happy to supply it.

I need some help with getting AngularJS to maintain my non-string values in directive attributes.

I was looking for a way to render a tree structure in HTML from a piece of JSON, and I found this code: http://jsfiddle/n8dPm/

I've been trying to adapt that for my project, as shown in the code below.

My controller/directive is shown here:

cxpControllers.controller("ProductTocCtrl", ["$scope", "$http", "$routeParams",
function ProductTocController($scope, $http, $routeParams) {
    $scope.typeOf = typeOf;

            //test value
    $scope.contents = {
        "id": 1,
        "name": "Test",
        subsections: [
            {
                id: 2,
                name: "Test1.1",
                link: "test11.xml",
                test: 34
            },
            {
                id: 3,
                name: "Test1.2",
                link: "test12.xml",
                test: 95
            }
        ]
    }

}]);

cxpControllers.directive('tree', function($pile) {
return {
    restrict: 'E',
    scope: {key: "=", content: "="},
    templateUrl: "tree_renderer.html",
    pile: function(tElement, tAttr) {
        var contents = tElement.contents().remove();
        var piledContents;
        return function(scope, iElement, iAttr) {
            if(!piledContents) {
                piledContents = $pile(contents);
            }
            piledContents(scope, function(clone, scope) {
                iElement.append(clone);
            });
        };
    }
};
});

And then this is my template:

<script type="text/ng-template" id="tree_renderer.html">
{{key}}:&nbsp;

<ul ng-if="typeOf(content) == 'object' && content != null">
    <li ng-repeat="(key, content) in content">
        <tree key="key" content="content"></tree>
    </li>
</ul>

<span ng-if="typeOf(content) != 'object'">
    "{{content}}"
</span>

</script>

<ul>
    <li ng-repeat="(key, content) in contents">
        <tree key="key" content="content"></tree>
    </li>
</ul>

This would work, except for one problem. Angular is turning the value of "content" into a string, preventing the recursion from working because it can't iterate over a string.

I have seen other questions like this, for example here, but their problem is that they used "@" in the directive scope, which converts to a string. But since I'm using "=", it should maintain the type.

Here's the output I'm seeing with the test data shown in the code above:

I would appreciate any help you can give. If you need more information I'll be happy to supply it.

• javascript
• angularjs
• angularjs-directive
• angularjs-scope

Share Improve this question Follow edited May 23, 2017 at 12:07 CommunityBot 111 silver badge asked Jan 3, 2014 at 20:30 MorganMorgan 36677 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The problem is with the typeOf function in your template. The piled template doesn't find this function so it is never equal to 'object'. Add a controller to your directive to define it.

I took the plunkr and added this:

controller: function($scope) {
    $scope.typeOf = function(val) {
        return typeof val;
    };
},

It does recognize it as an object. Check out the updated plunkr here.