Angularjs 使用范围值渲染视图答案

【问题标题】：Angularjs render view with scope valuesAngularjs 使用范围值渲染视图
【发布时间】：2016-06-29 13:59:59
【问题描述】：

我有这样的看法：

  <div ng-show="">
<div style='background-color: #13a4d6; border-color: #0F82A8'>
    {{headerdescription}}
    <div style='float: right'>{{price}} $</div>
</div>
<div style=' width: 60%; float: left;'>
    <div style='padding: 10px;margin-top: 10px;'>{{description}}</div>
    <div style='padding: 10px;margin-top: 10px;'>{{softvalues}}</div>
</div>
<div style='float: right; margin-top: 10px;'>
    <img src='data:image/png;base64,{{image}}'>
</div>

我希望我的 Angular 代码在设置范围值的情况下获得此视图。

我试过了：

  $scope.headerdescription = "YEEES";
                    $http.get('App_JsQuote/directives/door.html').success(function (html) {
                        console.log(html);
                    });

但问题是没有设置范围值，因此视图变得和以前一样。如何设置范围值，然后获取包含所有应该存在的数据的视图？

【问题讨论】：

stackoverflow.com/questions/18690804/…
你使用的是ngRoute还是ui-router？
你是在尝试注入 html 吗？看起来好像有人写了一个指令（从 URL 判断），在这种情况下，您不会使用 $http.get，而是使用指令本身。您的 ng-show 表达式将评估为 falsy (ng-show="")。 Here's a plnkr for the ng-show

标签： javascript angularjs http

【解决方案1】：

我不确定，但你可以试试这样的东西吗？

$scope.headerdescription = "YEEES";    
$scope.apply(function() {
    $http.get('App_JsQuote/directives/door.html').success(function (html) {
          console.log(html);
    });
});

【讨论】：

【解决方案2】：

您可能需要在控制器中全局使用ngCloak 指令或在元素中使用ngBind 指令。如果您需要创建媒体或链接 uri，则需要使用 $sce 服务。

例子：

<div ng-show="">
    <div style='background-color: #13a4d6; border-color: #0F82A8'>
        <span ng-bind="headerdescription"></span>
    <div style='float: right' ng-bind="price + '$'"></div>
</div>
<div style=' width: 60%; float: left;'>
   <div style='padding: 10px;margin-top: 10px;' ng-bind="description"></div>
    <div style='padding: 10px;margin-top: 10px;' ng-bind="softvalues"></div>
</div>
<div style='float: right; margin-top: 10px;'>
    <img ng-src='url'>
</div>

在你的 JS 文件中你需要使用 $sce 来过滤和生成 url var。

例子：

$scope.url = $sce.trustAsResourceUrl('data:image/png;base64,' + $scope.image);

【讨论】：