AngularJS ng-style 与 ng-model 范围变量

Posted 2023-03-06

【中文标题】AngularJS ng-style 与 ng-model 范围变量

【英文标题】：AngularJS ng-style with ng-model scope variable

【发布时间】：2016-12-24 07:07:35

【问题描述】：

我正在构建一个网站，让用户设计自己的移动应用。网站的一侧有一个用户填写的表单，另一侧有基于表单数据的应用程序的实时预览。它是这样设置的：

控制器：

$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 文件。我已经测试了表单，我知道它正在改变我拥有的所有范围变量，但预览器没有改变。任何帮助表示赞赏！

【参考方案1】：

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

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