I wish to load a image via ajax i.e get contents of image via ajax and show this as a image. I Know how to do the later part but
how do i get the ajax data/blob into a variable
how can i make a ajax call in a directive
I want the actual content of image not just src/url. I want to do this to overcome the CSP restriction of chrome apps
https://developer.chrome.com/apps/contentSecurityPolicy
Edit: To load image directly using base64
<img data-ng-src="data:image/png;base64,{{imageData}}" />
Updated Fiddle - http://jsfiddle.net/1koLs9fh/2/
To update URL
You need to bind the ng-src to some variable. On AJAX response update this variable.
<div ng-app="myApp">
<div ng-controller="myCtrl">
<img ng-src="http://{{url}}"/>
<button ng-click="loadImages()">load images</button>
</div>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl',
function ($scope) {
$scope.loadImages = function() {
$scope.url = 'cdn1.www.st-hatena.com/users/ho/howdy39/profile.gif';
}
}
);
http://jsfiddle.net/1koLs9fh/
Related
I have a page, index.blade.php. (no angularjs)
<body>
<table>
<!-- If i click on a row, I store its id in a global variable (selected_id),
then I can click on show_edit_modal to view its details -->
<tr></tr>
<tr></tr>
</table>
<button id="show_edit_modal">Show Modal</button>
<div id="edit_modal">
<!-- empty at first -->
</div>
$('#show_edit_modal').click(function(){
// Fetch view
$.ajax({
type: 'GET',
url: '/get_edit/' + selected_id,
success: function(response) {
$('#edit_modal').html(response);
}
});
});
</body>
Click on “Add” button -> it will display a modal.
An ajax request will be sent on click to fetch the view (edit.blade.php) to be placed inside that modal. Not using an iframe. The request will return a view/blade file.
In the controller, receiver of ajax request:
$data = Model::find($id);
return view('edit', compact('data'));
edit.blade.php
<div ng-app="itemsModule">
<div ng-controller="editController">
...
</div>
</div>
<script src="angular.min.js">
<script src="/controllers/edit.js">
That fetched view has an angularjs app in it. The angularjs library script, controller script, all loaded inside that view.
Is this possible? If so, is there a standard way of doing it? Or should I try restructuring?
I have tried to run this and it works on the first click, but when I click on a different row and try to edit the details, I get a warning about attempting to load angularjs more than once.
I was able to solve this using AngularJS manual bootstrapping.
I moved the angular.min.js to my index.blade.php.
Then, in my edit.blade.php:
<div id="helloApp">
I am an angular app
<div ng-controller="editController">
Mighty controller
<span ng-cloak>#{{message}}</span>
</div>
</div>
<script>
var ang = angular.module('itemsModule', []);
ang.controller('editController', function($scope, $http){
console.log('init edit controller');
$scope.message = 'hello';
});
angular.element(function() {
angular.bootstrap(document.getElementById('helloApp'), ['itemsModule']);
});
</script>
We are working with jquery 1.9.1 and angular 1.2.13. We are using a wysiwyg editor that works great, we save the html into the database and load the html back using jquery append function and works fine. Now we are trying to append the same html into a div tag (the wysiwyg editor also uses a div) and the append function it's not working. We check in the console, and the string we are trying to append is there, also jquery grabs the element (also checked in the console log) but the append function it's not working.
PD: I apologize for my english
The html
<div data-ng-controller="PreviewCtrl">
<div class="container">
<div id="resumenPreview"></div>
</div>
</div>
The controller
angular.module('module').controller('PreviewCtrl', ['$scope', '$routeParams', '$location', '$http', 'selectedElement',
function ($scope, $routeParams, $location, $http, selectedElement) {
$scope.id = $routeParams.id;
$scope.mensaje = $scope.id;
$scope.imagen = null;
$scope.dataImagen = null;
//is not working either
$('#resumenPreview').append("hola");
$scope.pageLoad = function () {
var x = selectedElement.data.Resumen;
//This is properly displayed in the console
console.log(x);
//This too, is displayed in the console log
console.log($('#resumenPreview'));
// Why this isn't working? I'am clueless
$('#resumenPreview').append(x);
};
$scope.pageLoad();
}]);
My guess would be there are multiple divs with id="resumenPreview". But this is clearly the wrong way to handle such things in angular. There shouldn't be dom-manipulation in the controller - directives should take care of dom-related stuff. Put the html-string into the scope and let angular handle the injection into the dom:
instead of $('#resumenPreview').append(x); do $scope.resumenPreview = x;
and in the template do this:
<div class="container">
<div ng-bind-html="resumenPreview"></div>
</div>
Solve it with angularjs for the ng-bind-html to work it's necessary to include
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
and to add 'ngSanitize' as a dependency in the app module configuration. And then just do what #Johannes Reuter posted.
Thanks everybody, Greetings.
I have a angularjs app with a controller and a partial wired up..
In my controller I have a array of links..
$scope.links = ['http://www.example.com/1','http://www.example.com/2'];
In my partial, I have the following code..
<div ng-repeat="link in links">
Link
</div>
This does not seem to work.. I am running this via a NodeJS app locally..and so my URLs always end up as
http://dev-server.local:3000/"http://www.example.com"
Can anyone please help me figure out how I can add a hyperlink from my controller directly into my partial template and make Angular not append the page URL..
You have to explicitly trust extern URL:s. Look at the documentation for $sce.
In you controller, make sure you have a dependency to $sce, then in create a method that trust the external url.
$scope.trustUrl = function(url) {
return $sce.trustAsResourceUrl(url);
}
In your view you can reference this method and pass in the url with
<a ng-href="{{ trustUrl(item) }}">Click me!</a>
instead of
href={{link}}
use
ng-href={{link}}
I have an angularjs-Application.
In one Controller i´m waiting for an image source address - I get this from an PHP-Service.
controller.controller("LayoutCtrl",
["$scope", "$http", "$route",
function($scope, $http, $route) {
$scope.$route = $route;
$http.get('zkLib/services/header.php').success(function(data) {
$scope.header = data; });
}]);
The header.php looks like this:
$result = array();
$result['index'] = db()->loadSetting('index_page');
$result['banner'] = db()->loadSetting('site_banner');
echo json_encode($result);
So in my template i´ve written:
<div ng-controller="LayoutCtrl">
<div desc="header">
<a desc='hp_link' href="#{{header.index}}">
<img desc='banner' ng-src="zkLib/f/img/{{header.banner}}">
</a>
</div>
</div>
My Problem is now:
When the site opens, it shows the "NoImage"-Icon from the Browser while waiting for this service.
After this the image will be viewed correctly.
But in my COnsole i have this error too:
Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:160/cms/app/zkLib/f/img/".
On my Server i have the image 'loading.gif', i want to show this while i´m waiting for my service.
How to solve this? Could someone help?
The reason you are getting the error in the console is because, before the request to header.php completes and angular renders {{header.banner}}, its trying to load just "zkLib/f/img/". You can fix this by putting the entire relative url into the {{header.banner}} scope property.For example...
<img desc='banner' ng-src="{{header.banner}}">
and make header.banner be the full relative path...
$http.get('zkLib/services/header.php').success(function(data) {
$scope.header = data;
$scope.bannerImage = 'zkLib/f/img/' + $scope.header.banner;
});
Now, before the request is complete, the image src will be an empty string and it won't show the broken image icon or throw the error. If you want to show a loading image before the controller loads, you can just set src, like this...
<img desc='banner' ng-src="{{bannerImage}}" src="/path/to/loading.gif">
Before the request is complete, the src will be the loading.gif file. Once the request completes, ng-src will kick in and your header.banner image will be displayed
When the controller is instantiated, $scope.header is still empty.
This makes ng-src="zkLib/f/img/{{header.banner}}" to be evaluated to this relative path:
'zkLib/f/img/' // translates to "http://localhost:160/cms/app/zkLib/f/img/"
What you need to do is to keep ng-src empty while $scope.header is empty.
#1) One way is to write this:
<img desc='banner' ng-if="header" ng-src="zkLib/f/img/{{header.banner}}">
#2) Or this (if you don't want to use ngIf):
<img desc='banner' ng-src="{{ header && 'zkLib/f/img/' + header.banner }}">
#3) But I would prefer to create the link inside the controller:
$http.get('zkLib/services/header.php').success(function(data) {
$scope.header = data;
$scope.banner = 'zkLib/f/img/' + data.banner;
});
And then just use it easily:
<img desc='banner' ng-src="{{ banner }}">
I am storing the the source string of an image to be rendered in HTML in the AngularJS controller, however it yields a 404 before the Angular controller is initialized.
Here is the HTML:
<div ng-controller="Cont">
<img src="{{imageSource}}">
</div>
Angular controller:
var Cont = function($scope) {
$scope.imageSource = '/tests.png';
}
And the error I get (%7D%7D corresponds to the {{ in the template).
GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found)
How can I prevent this from happening? That is, only load the image when the Angular controller has been initialized?
Try replacing your src with ng-src for more info see the documentation:
Using Angular markup like {{hash}} in a src attribute doesn't work
right: The browser will fetch from the URL with the literal text
{{hash}} until Angular replaces the expression inside {{hash}}. The
ngSrc directive solves this problem.
<div ng-controller="Cont">
<img ng-src="{{imageSource}}">
</div>
If someone is searching the solution for styling background-image then use this:
<div ng-style="{'background-image': 'url({{ image.source }})'}">...</div>