css - 带有 ng-model 范围变量的 AngularJS ng-style

Question

我正在构建一个网站，让用户可以设计他们自己的移动应用程序。网站的一侧有用户填写的表格，另一侧有基于表格数据的应用程序实时预览。这是它的设置方式:

Controller :

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

我必须使用 $parent，因为我在索引页上使用 ng-include 来包含 form.htm 和 preview.htm 文件。我已经测试了表单，我知道它正在更改我拥有的所有范围变量，但预览器没有更改。感谢您的帮助!

Answer 1

删除 {{}} 和 '' 它应该可以工作，如下所示:

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