Question

我需要一些帮助，让AngularJS在指令属性中维护我的非字符串值。

我一直在寻找一种从一段JSON渲染HTML树形结构的方法，我找到了这段代码：http://jsfiddle.net/n8dPm/

我一直在尝试为我的项目调整它，如下面的代码所示。

我的控制器/指令如下所示：

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($compile) {
return {
    restrict: 'E',
    scope: {key: "=", content: "="},
    templateUrl: "tree_renderer.html",
    compile: function(tElement, tAttr) {
        var contents = tElement.contents().remove();
        var compiledContents;
        return function(scope, iElement, iAttr) {
            if(!compiledContents) {
                compiledContents = $compile(contents);
            }
            compiledContents(scope, function(clone, scope) {
                iElement.append(clone);
            });
        };
    }
};
});

然后这是我的模板：

<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>

除了一个问题外，这会有效。 Angular将“content”的值转换为字符串，防止递归工作，因为它不能遍历字符串。

我已经看到过这样的其他问题，例如here，但他们的问题是他们在指令范围内使用了“@”，它转换为字符串。但由于我使用“=”，它应该保持类型。

以下是我在上面的代码中显示的测试数据所看到的输出：

感谢您提供的任何帮助。如果您需要更多信息，我很乐意提供。

Answer 1

问题在于模板中的typeOf function。编译后的模板找不到此函数，因此它永远不会等于'object'。在指令中添加一个控制器来定义它。

我拿了那个插件并添加了这个：

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

它确实将它识别为一个对象。查看更新的plunkr here。

AngularJS将对象转换为指令中的字符串

1 个答案: