如何以編程方式構建視圖內容

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