AngularJS ng-styleとng-modelスコープ変数

Question

私はユーザーが自分のモバイルアプリをデザインできるようにウェブサイトを構築しています。ウェブサイトの一方の側には、ユーザーが記入するフォームがあり、他方の側には、フォームデータに基づいてアプリのライブプレビューがあります。これは、それが設定されている方法です。

コントローラー：

$scope.primaryColor = "#325490"; 

フォーム入力：

<!-- Primary Color --> 
<div class="form-group"> 
    <label for="primaryColor" class="col-sm-2 control-label">Primary:</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" ng-model="$parent.primaryColor"> 
    </div> 
</div> 

ライブプレビュー：

<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color':'{{$parent.primaryColor}}'}"> 

が、私は私がするので$親を使用する必要がありますインデックスページにng-includeを使用してform.htmファイルとpreview.htmファイルをインクルードします。私はフォームをテストして、私が持っているスコープ変数をすべて変更していることを知っていますが、プレビューアは変更されていません。どんな助けもありがとう！

Answer 1

削除{{}}と '' と、それは次のように動作するはず：

<div class="mockView" ng-style="{'background-image':'url({{$parent.backgroundFile}})', 'background-color': $parent.primaryColor }">