Angularjs render view with scope values

Question

I have a view like this:

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

And i want i my angular code to get this view with the scope values set.

I tried this:

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

but the problem is that the scope-values are not set and therefor the view becomes as before. How can i set the scope-values and then get the view with all the data that should be there?

http://stackoverflow.com/questions/18690804/insert-and-parse-html-into-view-using-angularjs — KreepN, Jun 29 '16 at 14:02
Are you trying to inject html? It looks as if someone has written a directive (judging from the URL), in which case, you wouldn't use `$http.get`, but instead use the directive itself. Your ng-show expression will evaluation to falsy (`ng-show=""`). [Here's a plnkr for the ng-show](http://plnkr.co/edit/YgjARFdJOk84PTvOm50C?p=preview) — n daniel, Jun 29 '16 at 14:13

score 0 · Answer 1 · answered Jun 29 '16 at 14:14

0

I'm not sure but can you try with something like this ?

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

answered Jun 29 '16 at 14:14

Sparw

2,688
1
15
34

score 0 · Answer 2 · answered Jun 29 '16 at 15:07

You can need to use the ngCloak directive globally in the controller or use the ngBind directive in the element. In the case you need to create media or link uri you need to use the $sce service.

Example:

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

In your JS file you need to use $sce to filter and generate the url var.

Example:

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

Angularjs render view with scope values

2 Answers2