Question

我正在尝试在AngularJS视图中构造一个句子。例如，对于变量{overdue: 5, name: "Kasper"}，我希望"{{overdue}} days overdue. Employee: {{name}}"。

我尝试使用一个函数：

function renderLine() {
    var results = new Array();
    if (overdue) {
        result.push("{{overdue}} days overdue");
    }
    if (overdue) {
        result.push("{{points}} points");
    }
    /* combine into a string */
    var result = "";
    for (var i = 0; i < results.length; i+=1) {
        if (result.length != 0) {
            result += ", ";
        }
        result += results[i];
    }
    if (result.length > 0) {
        result += ". ";
    }
    /* add name */
    result += "Name: {{name}}";
    return result,
}

更具体地说，我的问题是：如何在以编程方式构造的字符串中使用{{variable}}等角度指令并对指令进行角度处理？我不想在不使用指令的情况下构造字符串，因为字符串被翻译成不同的语言，在句子中放置变量可能会发生变化。

Answer 1

我最终创建了一个角度指令。 ui-if和ngRepeat指令是DOM操作指令的良好起点。有一些修改后的指令的代码：

angular.module("hk").directive("myDirective", 
[       "$interpolate", "$log",
function($interpolate,   $log) {
    return {
        transclude: 'element',
        replace: false,
        restrict: 'A',
        terminal: true,
        compile: function(tElement, tAttrs, linker) {
            return function(scope, elem, attr) {
                var lastElement;
                var lastScope;
                var expression = attr.myDirective;
                scope.$watch(expression, function (item) {
                    if (lastElement) {
                        lastElement.remove();
                        lastElement = null;
                    }
                    if (lastScope) {
                        lastScope.$destroy();
                        lastScope = null;
                    }
                    lastScope = scope.$new();
                    lastScope.item = item;
                    linker(lastScope, function (clone) {
                        lastElement = clone;
                        var results = [];
                        if (item.isactive) {
                            results.push("++{{item.createdtime | age}} active");
                            if (item.status == 'started') {
                                results.push("++{{item.startedtime | age}} started: {{item.startedby_displayname}}");
                            }
                        }
                        if (item.islate) {
                            results.push("++{{item.latetime | age}} past due");
                        }
                        var result = "";
                        for (var i = 0; i < results.length; i+=1) {
                            if (result.length != 0) {
                                result += ", ";
                            }
                            result += results[i];
                        }
                        if (result.length > 0) {
                            result += ". ";
                        }
                        if (!item.startedby_displayname) {
                            if (item.assignedto_displayname) {
                                result += "++Assigned to {{item.assignedto_displayname}}.";
                            }
                        }
                        var interpolated = $interpolate(result)(lastScope);
                        elem.after(interpolated);
                    });
                });
            };
        }
    };
}]);

Answer 2

我认为您可以将$scope.$eval用于您的目的。 See this fiddle

你可以创建一个这样的消息：

$scope.$eval('"Hello "+name');

然后让要评估的字符串按语言更改。

{de: '"Hallo " + name', it: '"Buon giorno "+ name', fr: '"Salut " +name'}

或者那些东西（当然你要检查那些翻译）。

您还可以创建一个directive and use $compile来保留您现在使用的确切字符串。

如何以编程方式构造视图内容

2 个答案: