How to construct view content programmatically

Question

I'm trying to construct a sentence in an AngularJS view. For example, with variables {overdue: 5, name: "Kasper"}, I would like to have "{{overdue}} days overdue. Employee: {{name}}".

I tried using a function:

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

More specifically, my question is: how can I use angular directives like {{variable}} in strings that are constructed programmatically and have angular process the directives? I don't want to construct the strings without using directives because the strings are translated into different languages, where the placing of variables within sentences might change.

K Ronning · Accepted Answer · 2013-01-03 11:28:09Z

I ended up creating an angular directive. The ui-if and ngRepeat directives were good starting points for a DOM-manipulating directive. There is the code for the somewhat modified directive:

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);
                    });
                });
            };
        }
    };
}]);

iwein · Accepted Answer · 2013-01-02 19:50:53Z

0

I think you could use $scope.$eval for your purposes. See this fiddle

In you could create a message like this:

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

And then let the string to be evaluated change per language.

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

Or something along those lines (of course you'll want to have those translations checked).

You could also create a directive and use $compile to keep the exact strings you have now working.

edited Jan 2, 2013 at 19:50

answered Jan 2, 2013 at 19:43

iwein

26.2k13 gold badges75 silver badges112 bronze badges

4 Comments

K Ronning Over a year ago

Thanks, but my solution really requires the use of complete strings with markup.

iwein Over a year ago

then you probably need a directive, what you did in your own answer seems a bit over the top though...

K Ronning Over a year ago

Could you give some suggestions how I could simplify my solution?

iwein Over a year ago

@KasperRönning I want to create a fiddle for that, but haven't found the time yet...

Collectives™ on Stack Overflow

How to construct view content programmatically

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related