I'm writing a Firefox addon. I have a very simple code:
var ANG_APP = angular.module('zooniversexpert', [])
.config(['$compileProvider', function( $compileProvider ) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|http?):/);
}
])
.controller('BodyController', ['$scope', function($scope) {
this.gallery = [{url:'http://zooniverse-export.s3-website-us-east-1.amazonaws.com/21484_1000_D35_Season%202_Set%201_EK006076.JPG'}];
}]);
That gallery array holds a single element with key url of http://zooniverse-export.s3-website-us-east-1.amazonaws.com/21484_1000_D35_Season%202_Set%201_EK006076.JPG.
My HTML is here:
<body ng-controller="BodyController as BC">
<img ng-src="aEntry.url" ng-repeat="aEntry in BC.gallery"/>
</body>
However the image fails to load, it keeps giving this error:
And inspection on the document shows this is what Angular tried to load:
<img xmlns="http://www.w3.org/1999/xhtml" ng-src="aEntry.url" ng-repeat="aEntry in BC.gallery" class="ng-scope" src="unsafe:aEntry.url" />
Please notice the unsafe:aEntry.url.
Related
While trying to render the hyper link using Angular JS it does not generate the hyper link. All other tags like <p> or <h2> work fine, but href fails.
var tempString = "<a href='tel:{mob_number}'>call me support</a>"
actual output - string is displayed but hyperlinked is not rendered. It's not clickable. Inspect page display tag generated as
<a> call me support </a>
Expected output - should display string with hyperlink.
I try to do this by 3 mood "Html, directive, bind-html"
Directive not work stackoverflow, try it on your local
var app = angular.module("app", []);
app.controller("ctrl", [
"$scope", "$sce",
function($scope, sce) {
$scope.mob_number = "123";
var tempString = "call me support";
$scope.asHtmlTemplate = sce.trustAsHtml(tempString);
}
]);
app.directive("mobile", function() {
return {
templateUrl: "mobile.html",
scope: {
content: "#",
mobNumber: "="
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<h4>simple html</h4>
<a ng-href="tel:{{mob_number}}">call me support</a>
<h4>as directive [directive not display in stackoverflow]</h4>
<mobile mob_number="mob_number" content="call me support"></mobile>
<!-- directive not display in stackoverflow ? -->
<h4>as Html template from controller</h4>
<div ng-bind-html="asHtmlTemplate"></div>
<script type="text/ng-template" id="mobile.html">
<a ng-href='tel:{{mobNumber}}'>{{content}}</a>
</script>
</div>
Add the following code in html box and it will work as it should be
<div ng-app="myapp" data-ng-controller='Ctrl'>
<h1> Header </h1>
<h3> {{test}} </h3>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('Ctrl', function($scope){
$scope.test = "Hello";
});
</script>
Now move the JavaScript to JavaScript box
var app = angular.module('myapp', []);
app.controller('Ctrl', function($scope){
$scope.test = "Hello";
});
It start giving error: Uncaught Error: No module: myapp
I don't want to write everything in html section, any fix?
While I was playing with setting, found the answer :)
Change the setting Load Type from "OnLoad" to "No wrap - in ", see the attached image.
Strange but it is working like charm :)
I have simple Scala Play Framework and Angular application. I tried to render JSON data on play's "xxx.scala.html" template but don't know what is the problem it is not rendering as expeted.
#main("Welcome to Play") {
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script>
<script>
app.controller('NamesCtrl', function($scope) {
// get names using AngularJS AJAX API
$http.get('/getNames').success(function(data){
$scope.names = data;
});
});
</script>
<div ng-app="app" ng-contoller="NamesCtrl">
<ul>
<li ng-repeat=" name in names">{{name}}</li>
</ul>
</div>
}
My route entry
GET /getNames controllers.HomeController.getNames
Scala Controller:
def getNames = Action {
val names = List("Bob","Mike","John")
Ok(Json.toJson(names)).as(JSON)
}
When I am calling my page using url
http://localhost:9000/getNames
I was getting response on page as below,
["Bob","Mike","John"]
Please can you explain what am I doing wrong here?
Thanks !!
There are some problems in the code. The correct one is this:
#main("Welcome to Play") {
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.19/angular.min.js"></script>
<div ng-app="myApp" ng-controller="NamesCtrl">
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('NamesCtrl', function($scope, $http) {
$http.get('/getNames').success(function(data){
console.log(data);
$scope.names = data;
});
});
</script>
}
What has changed:
AngularJS 1.3.19 instead of 1.2.10
AngularJS module - which is referenced in the div
injected the $http service in the controller
your ng was wrong - it should be ng-controller instead of ng-contoller (a typo I guess)
The result is what you would expect:
I need to show link in page having attribute value mailto.
normal href attribute value working fine but if value is email than it removed
Code:
myCtrl.link = '<code>Email</code>';
<code><span ng-bind-html="myCtrl.link"></span></code>
rendered output:
<code><a target="_blank">Email</a></code>
Please suggest how to handle anchor having href value like mailto:sulok#atlogys.com
You are running into a "security" issue,
please have a look at this doc-page...
Just say "this is safe" to angular:
function TestCtrl(vm, $sce) {
'use strict';
var htmlString = '<code>Email</code>';
vm.link = $sce.trustAsHtml(htmlString);
}
angular
.module('test', [])
.controller('TestCtrl', ['$scope', '$sce', TestCtrl])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="test">
<div ng-controller="TestCtrl">
<code><span ng-bind="link"></span></code>
</div>
</article>
I am trying to make a simple project where i want to populate the section with ng-view directive and i keep getting the following error:
I also included in index.html the angular files:
1-angular min js
2-angular-route min js
3-angular-resource min js
Error: $injector:modulerr Module Error Failed to instantiate module
booksInventoryApp due to: Error: [$injector:modulerr]
How can i fix this?
My code is:
index.html
<!DOCTYPE html>
<html ng-app="booksInventoryApp">
<body>
<section ng-view></section>
<script src="js/index.js"></script>
</body>
</html>
index.js
var app = angular.module('booksInventoryApp', ['booksInventoryApp.bsm','booksInventoryApp.allBooks']);
//route provider
app.config(['$routeProvider', function($routeProvider){
$routeProvider
// route for the index page
.when('/', {
templateUrl : '../allBooks.html',
controller : 'booksCtrl'
})
// route for the best selling month page
.when('/bsm/:id', {
templateUrl : 'bsm.html',
controller : 'bsmCtrl'
})
// route for the root
.otherwise({
redirectTo : '/'
});
}]);
bsm.js
var app = angular.module('booksInventoryApp.bsm', []);
app.controller('bsmCtrl', function($scope) {
$scope.book = "Bla Bla";
});
bsm.html
<section class="container">
{{book}}
</section>
allBooks.js
var app = angular.module('booksInventoryApp.allBooks', []);
// controllers
app.controller('booksCtrl', function($scope, $http) {
$http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
.success(function(data) {
$scope.data = data;
});
});
allBooks.html
<section class="row">
<section class="col-sm-6 col-md-2" ng-repeat="book in data.books">
<section class="thumbnail">
<img ng-src="{{book.url}}">
<section class="caption">
<h3>{{book.name}}</h3>
<p>Author: {{book.author}}</p>
<p>ID: <span class="badge">{{book.id}}</span></p>
<p>Available: <span class="badge">{{book.amount}}</span></p>
<p>Price: <span class="badge">${{book.price}}</span></p>
<p><a ng-src="#/bsm/{{book.id}}"><button class="btn btn-info">Best selling month</button></a></p>
</section>
</section>
</section>
</section>
You need to add ngRoute module in your app and also the script reference of the angular-route.min.js write after the angular.js, Also you need to add bsm.js and allBooks.js in your html after above two mentioned file has loaded.
Code
var app = angular.module('booksInventoryApp', [
'booksInventoryApp.bsm',
'booksInventoryApp.allBooks',
'ngRoute'
]);
Note
Both the version of angular.js & angular.route.js should be the
same otherwise it will show some wierd issue. Preferred version is 1.3.15
In your index.html page you not included bsm.js and allBooks.js files which contains the required dependencies of your app.
Since you have specified the dependency of 'booksInventoryApp.bsm','booksInventoryApp.allBooks' in your app angular is not able to find those modules and hence you are getting that error.
Also you need to include angular route script reference and ngRoute in your dependencies because you are using angular routing in your app.
var app = angular.module('booksInventoryApp', ['ngRoute', 'booksInventoryApp.bsm', 'booksInventoryApp.allBooks']);