I can't bind string to html element in angular js

Question

I am sorry, i am new on ionic(angularjs). I have tried to bind from string, the string is containing youtub video url.

<iframe width="280" height="150" src="//www.youtube.com/embed/UAHEQnOtzuw?list=UUj4nCgtjKJppK_IZeY8TUJg" frameborder="0" allowfullscreen></iframe>

In controller

$scope.videoElement.str = $scope.item.restData.videos[0].link;

In html

<div ng-bind-html="videoElement.str"></div>

but i can't see nothing. :(

Here is screenshot. http://screencast.com/t/Fgct1sdnOon

How can i fix this issue? Thank you for an advance.

Sajal · Accepted Answer · 2016-05-24 15:57:54Z

1

A link would not append to a div unless you make use of $sce. Keep using the iframe and embed the url as string as:

<iframe width="280" height="150" ng-src="{{videoElement.str}}" frameborder="0" allowfullscreen></iframe>

If you still need to bind the iframe to a div then this is probably how you can achieve it:

Controller:

$scope.frame= '<iframe src="' + $scope.videoElement.str + '"></iframe>';

View:

<div ng-bind-html="frame| safeHtml">

Where safeHtml is a filter directive to safely bind the html and makes use of $sce - Documentation

Include this in the app:

app.filter('safeHtml', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
});

UPDATE:

If $scope.videoElement.str is the Iframe link, then the below code would suffice as:

<div ng-bind-html="videoElement.str | safeHtml">

Also, add the safeHtml directive as mentioned above in the app.js or after the end of controller.

edited May 24, 2016 at 15:57

answered May 24, 2016 at 9:44

Sajal

4,4111 gold badge22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SiYan Xie Over a year ago

Hello @Dev-One. Thank you for your reply, So i can't bind the string such as " <iframe width="280" height="150" src="//www.youtube.com/embed/UAHEQnOtzuw?list=UUj4nCgtjKJppK_IZeY8TUJg" frameborder="0" allowfullscreen></iframe> " ?

Sajal Over a year ago

@SiYanXie That depends! What do you have in $scope.videoElement.str?

SiYan Xie Over a year ago

that is containing above string not only url.

Sachin G. · Accepted Answer · 2016-05-24 09:49:18Z

0

I think you missed ngSanitize as module dependency.

For Example:

    angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.myHTML =
     'I am an <code>HTML</code>string with ' +
     '<a href="#">links!</a> and other <em>stuff</em>';
}]);

HTML:

<div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
</div>

answered May 24, 2016 at 9:49

Sachin G.

1551 silver badge9 bronze badges

Collectives™ on Stack Overflow

I can't bind string to html element in angular js

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related