I am having trouble understanding property binding with interpolation.
The below code is the correct way to assign src for an iframe.
<iframe [src]='sanitizer.bypassSecurityTrustResourceUrl(video.url)' frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
But I would like to concatenate url straight ahead with id. I manage to write the code below but I am sure it is wrong.
<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl("' + https://www.youtube.com/watch?v=' + '"video.id)" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
So can any one guide on how to concatenate strings during binding and interpolation? Also some explanation or link to any guide will be much appreciated.
First
I believe you have just added more quotation marks than necessary. I think that this should work better:
<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/watch?v=' + video.id)"></iframe>
Second
I would not recommend sanitizing the input directly inline. I suggest you use component inner logic to sanitize your insecure data. Build the url completaly within some inner function of your component, the odds well might be you would not need the sanitizer at all then.
Please review following working code and review plunkr as well.
https://plnkr.co/edit/tYq22VjwB10WmytQO9Pb?p=preview
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-sanitize.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<p>{{movie.src}}</p>
<iframe ng-src="{{trustSrc(movie.src)}}"></iframe>
</div>
</body>
</html>
app.js
var app = angular.module('plunker', ['ngSanitize']);
app.controller('MainCtrl', function($scope, $sce) {
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
$scope.movie = {src:"https://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});
Related
I am new to Angular JS. I am trying to start with the basic Hello World Program. Here is my plunk http://plnkr.co/edit/uW1fHB7a17gpvn341sn3?p=preview.
var MainController = function($scope){
$scope.message = "Hello, Angular!";
}
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{message}}</h1>
</div>
</body>
</html>
I created a simple controller and has a single model binding in that. It is not working for me. I am not able to get what the problem is. Can anybody please help me in getting started.
You need to boostrap your app properly and define your controller correctly. Observe the following changes...
<html ng-app="app">
angular.module('app', []).controller('MainController', MainController)
Plunker - updated demo
The AngularJS Getting Started resources should be packed with everything you'd like to know to get up and running
A couple things.
You need to create an angular module:
var app = angular.module('myApp',[]);
The second argument is an array of dependency modules. You don't need one here.
Then change ng-app to ng-app="myApp" referencing whatever you named your module.
Then you need to create a controller the angular way.
app.controller('MainController',MainController);
Here's the full script. Plunkr
function MainController($scope) {
$scope.message = 'Hello World';
}
var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
Your original code works fine with Angular 1.0, just not with 1.4
Just thought it was worth mentioning, in case you were following a tutorial, and wondering why it wasn't working or something.
See this plunkr working fine in 1.0 with equivalent code to yours...
http://plnkr.co/edit/zbWvwxVDvhhVKgc5lGrr?p=preview
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
{{message}}
</div>
</body>
</html>
and
var MainController = function($scope) {
$scope.message = "Hello, Angular!";
}
I am starting an O'Reilly book, AngularJS and the first example is as follows. On my end the "{{greeting.text}}" is showing up as that inside of being replaced with hello. I have the angular linked properly, and when I put it into jsFiddle it doesn't work as well, unless I change onLoad to no wrap- then it works.
I am using Webstorm on mac and I'm thinking my problem may be in there, but can't find anything that has fixed it.
Thank you for helping what is probably a simple solution.
HTML
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<script src="angular.js"></script>
<script src ="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
Controller
function HelloController($scope) {
$scope.greeting = { text: 'Hello'};
}
Seems like something might be wrong with the way you are including angular. The following code works fine for me
index.html:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src ="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controllers.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello'};
}
Open up your index.html in chrome and press Command + Option + J and when the developer tools open up, head to the network tab, refresh the page and see if you are loading your angular.js script correctly - if not, that is the issue.
Which angular version you use?
Mine is 1.3
angular.module('HelloApp', [])
.controller('HelloController', ['$scope', function($scope) {
$scope.greeting = { text: 'Hello'};
}
Sorry, if something stupid I am missing here, but I really tried various combos to make this code work, but no luck.
I am learning directive in AngularjS from Recipes with AngularJS but stuck at this code -
https://github.com/fdietz/recipes-with-angular-js-examples/tree/master/chapter3/recipe4
I believe it should print Heading before Hello World p text. but its not coming. Let me know what I am missing in my code -
PLNKR CODE
Code as a Whole -
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Directive Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.directive("myWidget", function(){
return {
restrict: "E",
transclude: true,
template: "<div ng-transclude><h3>Heading</h3></div>"
};
});
</script>
</head>
<body>
<my-widget>
<p>Hello World!!</p>
</my-widget>
</body>
</html>
check the first "h3" before "div"
template: "<h3>Heading</h3><div ng-transclude></div>"
The reason you need to change the recipe is because Angular changed how transclusion works between v1.0 and v1.2.
With change eed299a3, Angular now "clears the translusion point before transcluding."
If you load v1.0 (which is what the github repository uses), you will see "Heading". With v1.2, you won't see "Heading", unless you modify the template the way #Noypi explained.
I want to display an SVG image stored in a file and bind an angularJs ng-click function to the image.
I've tried putting the ng-click binding in the object/embed element tag as well as a wrapper div tag, but neither are working.
Does anyone know how to do this?
Attempted html:
<object ng-click="clickItem()" data="file.svg"></object>
<embed ng-click="clickItem()" src="file.svg/>
<div ng-click="clickItem()">
<object data="file.svg"></object>
</div>
<div ng-click="clickItem()">
<embed src="file.svg"/>
</div>
Resulting html after load:
<object ng-click="clickItem()" data="file.svg">
#document
xml-stylesheet
<svg ~svg contents....~></svg>
</object>
And the click does not register in any of the listed cases.
You can use SVG as regular images in all modern browsers (http://caniuse.com/svg-img).
<img ng-click="clickItem()" src="file.svg"/>
See it in action: http://jsfiddle.net/YJKnD/
I've manage to capture the click event with a little help of our friend ng-include.
Take a look at the code below:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script>
/**
* Module
*
* Description
*/
var myApp = angular.module('myApp', []);
myApp.directive('clickMe', function(){
// Runs during compile
return {
link: function($scope, element, iAttrs, controller) {
console.log(element);
element.bind('click', function(){
console.log('I\'ve just been clicked!');
})
}
};
});
</script>
</head>
<body>
<span ng-include="'circle1.svg'" click-me></span>
</body>
</html>
When you write something like:
<img ng-if="image.name != null" ng-src="img/{{ image.name }}_img.png" />
If image.name = null Angular will first add tag and evaluate src. The browser will make http request for img/_img.png wchich doesn't exists. Then angular will remove tag after parsing ngIf directive. What is the simplest way to resolve this issue? I thought that it's perfect use case for ngSrc and ngIf.
EDIT
In current unstable 1.2.0-rc.2 issue is fixed and everything works how it is supposed to do. In current stable 1.0.8 you can't even use ternary operator.
You don't need the ng-if directive for this. Just do a ternary operator test in your expression. Something like
<img ng-src="{{image.name?('img/'+ image.name +'_img.png'):null}}"/>
and it should work. See my plunker http://plnkr.co/edit/BWiGdO?p=preview
You can do it like this with a simple directive.
Here is the HTML :
<!DOCTYPE html>
<html ng-app="App">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>
<img ng-directive />
</body>
</html>
Here is the directive with the controller :
angular.module('App', [])
.controller('MyCtrl', function($scope){
$scope.image = {name: "myName"};
});
angular.module('App')
.directive('ngDirective', function($compile){
return {
link: function(scope, element, attrs){
if(scope.image.name != null){
$compile($(element).attr('ng-src', 'http://lauterry.github.io/slides-prez-angular/img/angularjs.png'))(scope);
}
}
}
});
Here is the complete working example : http://plnkr.co/edit/LNgsuX