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> 

Live Preview:

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