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

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

更具体而言，我的问题是：如何可以使用角指令像{{可变}}在字符串以编程构造并具有角过程中的指令？我不想在不使用指令的情况下构造字符串，因为字符串被翻译成不同的语言，其中变量在句子中的放置可能会改变。

Answer 1

我认为你可以使用$scope.$eval为你的目的。 See this fiddle

在你可以创建类似这样的消息：

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

然后让字符串进行评估每种语言的变化。

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

或者沿着这些线（当然你希望有这些翻译检查）。

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

Answer 2

我最终创建了一个角度指令。 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); 
        }); 
       }); 
      }; 
     } 
    }; 
}]);