2017-09-12 3 views
2

私はフロントエンドでいくつかのAngularJSを使用しており、レールアプリケーションを構築しています。Angular JS - 中括弧変数を描画しない、テキストエリアの動的ロードモデル

目標:ダイナミックに読み込まれた説明テンプレートを編集します。テンプレートの領域は、他の入力に基づいて変更されます。

例えば$scope.descriptionです:"This {{productName}} is really great. It also has {{subtitle}}, and some more words."

しかし、私は記述モデルにテンプレートをロードするとき、それは中括弧は記述モデルの内部変数を包んレンダリングされません。

これは、上記のように表示され、中括弧変数を対応する$scopeの変数値に置き換える代わりに表示されます。

例えば、私は説明は次のようになりたい:"This test product is really great. It also has test subtitle and some more words."

は、この例の画像を参照してください: Example image

はここにいくつかのコードです:

// From AngularJS Controller 

$scope.productName = "test product"; 
$scope.subtitle = "test subtitle"; 

$scope.description = $(".entertainmentTemplate").data("template"); 

//In the view template description is stored as data because it is set dynamically 
- @active_templates.each do |template| 
      %li 
       %a{ remote: true, data: {template: "#{template.description}"}}= template.name 

// View of the input fields 
= f.text_field :subtitle, "ng-model" => "productName" 
= f.text_field :subtitle, "ng-model" => "subtitle" 

// Description view 
= f.text_area :description, "ng-model" => "description" 

私は必要な場合は私に知らせてくださいそれ以上の文脈を含める。

+1

あなたは角度でjqueryのを使用してはならない、jqueryの中で起こって何かが外にありますAngularのイベントサイクルのその変更には手動でダイジェストと呼ばれるものが必要です。 – alphapilgrim

+0

@alphapilgrim返信いただきありがとうございます。 '$ scope.description = document.getElementsByClassName(" entertainmentTemplate ")[0] .dataset.template'のようにバニラjsを使ってjqueryを削除しようとしましたが、私は同じ問題を抱えています。何か他のことを言いましたか? – zstrad44

+1

レンダリングする前に手動でコンパイルする必要があるかもしれません。$ compileを使用してみてください –

答えて

0

私はそれを理解しました。解決策は、割り当てられたコントローラスコープ内の{{式変数}}の未レンダリングインスタンスをすべて置換するサービス$interpolate

$interpolateです。

ここで更新されたコードです:

// From AngularJS Controller 

$scope.productName = "test product"; 
$scope.subtitle = "test subtitle"; 

// I used the gon gem to store the value from the rails controller then 
passed it to the JS like so: 

$scope.entertainmentTemplate = gon.active_entertainment_template.descripti 

// Interpolate the variable with the controller $scope as the scope and 
assign it to the model you wish. 

$scope.description = $interpolate($scope.entertainmentTemplate)($scope); 

// View of the input fields 
= f.text_field :subtitle, "ng-model" => "productName" 
= f.text_field :subtitle, "ng-model" => "subtitle" 

// Description view 
= f.text_area :description, "ng-model" => "description" 

は、あなたがそうのようなコントローラに$interpolateサービスを追加していることを確認してください:

var app = angular.module('myApp', []); 
app.controller('listingFormCtrl',['$scope', '$interpolate', function($scope, $interpolate) { 

}]);