如何在AngularJS的模板中使用動態生成的值

我有一個用AngularJS編寫的自定義表單應用程序，現在我需要使用模板中表單的數據。但我沒有試過似乎工作。如何在AngularJS的模板中使用動態生成的值

我創造這樣一個自定義的指令......

.directive('dynamicModel', ['$compile', function ($compile) { 
    return { 
     'link': function(scope, element, attrs) { 
      scope.$watch(attrs.dynamicModel, function(dynamicModel) { 
       if (attrs.ngModel == dynamicModel || !dynamicModel) return; 

       element.attr('ng-model', dynamicModel); 
       if (dynamicModel == '') { 
        element.removeAttr('ng-model'); 
       } 

       // Unbind all previous event handlers, this is 
       // necessary to remove previously linked models. 
       element.unbind(); 
       $compile(element)(scope); 
      }); 
     } 
    }; 
}])

這是連接到像這樣的表單元素..

<div class="row" ng-repeat="field in customForm.fields"> 
<label>{{field.displayname}} 
     <input class="form-control" type="{{field.type}}" name={{field.variable}} dynamic-model="field.databind" placeholder="{{field.variable}}" required="{{field.isRequired}}"></label></div>

這部分的偉大工程，該領域目前是2方式綁定到輸入表單。但是，當我後來嘗試使用相同的方法來顯示從表單計算的報表中的值時，我會得到「field.databind」或至多解析的數據綁定字段名稱，如「currentUser.name」而不是值，例如「devlux」

我已經試過

<div class="row" ng-repeat="field in customForm.fields"> 
<p>{{field.name}} = {{field.databind}}</p> 
Also 
<p dynamicModel="field.databind"></p> 
</div>

沒有什麼工作，除非我把它改成一個input元素，這不是我想在這裏做。

動態模型代碼已經被別人解答了關於創建動態表單元素的問題，老實說，我認爲這只是我理解的一個步驟。但假設「field.databind」將始終是一個包含inscope模型名稱的字符串文字，我怎樣才能在普通模板中訪問它？

來源

2015-02-07 Devlux

任何這運氣？ – tasseKATT 2015-02-11 09:18:27

是的，道歉我不知道我需要正式「接受」答案。我在這裏是一個總noob。 tasseKATT的回答是正確的，並且工作完美無瑕。 – Devlux 2015-02-14 08:08:02

這很好:)總是最好接受你找到的答案是正確的，所以這個問題不會留下「未解決」的問題。如果答案不適合你，最好在下面留下評論，讓作者知道。這就是爲什麼我要問，跟進:) – tasseKATT 2015-02-14 09:01:17

{{field.databind}}將針對當前的$scope進行評估，並將導致無論是$scope.field.databind是什麼，例如字符串currentUser.name。

Angular無法知道currentUser.name不是您想要的字符串，而是實際上您想要評估的另一個表達式。

要再次進行評估，您需要在使用$parse服務的$scope上添加一項功能。

例如：

$scope.parseValue = function (value) { 
    return $parse(value)($scope); 
};

在HTML：

<div class="row" ng-repeat="field in customForm.fields"> 
    <p>{{field.displayname}} = {{parseValue(field.databind)}}</p> 
</div>

得到數據傳遞給parseDynamicValue例如將這個論點是currentUser.name。然後它使用$parse服務來對照當前的$scope來計算表達式，這將導致例如devlux。

演示：http://plnkr.co/edit/iPsGvfqU0FSgQWGwi21W?p=preview

來源

2015-02-08 10:22:13 tasseKATT

如何在AngularJS的模板中使用動態生成的值

回答

相關問題