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

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

Answer 1

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

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

具有ng-model范围变量的AngularJS ng-style

1 个答案: