i use ionic to build cross-platform app.
In out program we need load some post from server like: promotion/ news.
To achieve it, i use ng-bind-html:
<div ng-bind-html="inlineHtml|hrefToJS" style="padding:0px 10px 0px 10px">
I want to cached image in those post to client, that way my app can work offline have native mode, and smoothly.
i use: https://github.com/chrisben/imgcache.js/ to cached image
each time want to cached something , i just need add directives "img-cache" to img or div like this:
<div class= "ProductImage" img-cache ic-bg="{{$root.config.imgUrl+image}}">
</div>
But with inline html ( ng-bind-html above), i can replace all tag <img src = "" > in post to <img img-cache src = ""> but cached not happen, maybe directives img-cache not called.
I try to use $sce to set trust JS and html , but still can not solve problem.
Can you help me solve this case.
Many thanks!.
Related
I like to post the video link on my website but that doesnot work
<div ng-repeat="vid in video">
<iframe class="embed-responsive-item" width="250px" height="250px" src="https://www.youtube.com/embed/+{{vid.youtube}}" frameborder="0" allowfullscreen></iframe>
</div>
The above code not working, please help.
You must use the ngSrc attribute as they say in the Angular documentation otherwise your browser tries to fetch the url with "{{vid.youtube}}".
Plus you don't need to add a "+", there isn't any on Youtube urls.
EDIT : I actually had the same problem with iFrames, and I forgot about it : you must tell Angular you "trust" the Url given. Take a look a this post, it's exactly the same problem.
I am trying to get an iframe to work with AngularJS, but I don't know why it wont load my iframe src.
I have some angular double bracket variables, that I want to put at the end of the iframe src, but when I do it, I get a error.
The iframe code looks like this:
<iframe name="deltager" src="http://someurl.com/somefile.php?id={{item.id}}" frameborder="0" style="width: 100%; height: 45px !important;" scrolling="no"></iframe>
It is the {{item.id}} that doesn't work.
I have tried to put a ordinary link, without the variable, and it works fine.
I tried to inspect the app with chrome inspect, and the error that i get is:
Error: [$interpolate:noconcat] http://errors.angularjs.org/1.3.13/$interpolate/noconcat?p0=http%3A%2F%2Fsomeurl.com%2Fsomefile.php%id%3D%7B%7Bitem.id%7D%7D
at Error (native)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:37:417
at g (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:119:378)
at Pa (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:99:179)
at W (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:84:359)
at T (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:82:392)
at T (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:83:55)
at T (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:83:55)
at T (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:83:55)
at T (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:83:55)
Is there anyone who knows how I can get iframe src to work with angular variables.
Thanks in advance.
Have you tried using the ng-src attribute?
If the link is an external resource, you will need to configure the $sce service to trust the url.
<iframe ng-src="http://www.gravatar.com/avatar/{{item.id}}" ></iframe>
I am displaying an image with ng-src:
<img style="width: 100px" ng-src="{{absolutePath}}customImages/{{currentBook.idcode}}.png"/>
which is found and displays fine, however in Firebug console, I am getting this error:
NetworkError: 404 Not Found - http://localhost/learntracker/customImages/.png"
as if this is being executed before the variables exist.
This HTML code exists inside a <div ng-cloak ng-app="mainModule"> and ng-cloak I understand to stop any executing before the variables exist.
Why is this error occurring and how can I suppress it?
Looks like you might be loading the data which populates currentBook object asynchronously. So during the previous digest cycle, ng-src directive would have rendered the src for the image with no value for currentBook.idcode and once it gets populated on the scope, another digest cycle runs updating the image. So the previous causes the 404. You could place an ng-if on the image.
ex:-
<img style="width: 100px" ng-if="currentBook.idcode"
ng-src="{{absolutePath}}customImages/{{currentBook.idcode}}.png"/>
You could see an small demo implementation here
But this seems to have been fixed with 1.3.x version of angular, in-order to prevent rendering of image src before all the interpolations are expanded to get values. Plnkr
ng-cloak is only helpful not to expose interpolation expression briefly while the angular is loading.
Some additional info (Courtesy #zeroflagL ) :
With angular version 1.3.x ng-src makes use of all or nothing interpolation (feature addition to interpolateProvider), meaning it will not expand the directive unless all the bound interpolations are resolved. You can see this mapping in the compile provider source.
ALL_OR_NOTHING_ATTRS = makeMap('ngSrc,ngSrcset,src,srcset'),
What you might want to do in this case is to actually have a function on scope that creates the ULR for the image path:
<img style="width: 100px" ng-if="currentBook.idcode" ng-src="getImagePath(currentBook.idcode)">
var absolutePath = 'somepath/';
$scope.getImagePath = function(idcode) {
return absolutePath + 'customImages/' + idcode + '.png';
}
I'm using AngularJS to "include" html partials in my web app. I'm using a nested ng-include for this.
I also have an animation on the outer most ng-include. It all works fine. The only problem is that the outer ng-include template is loaded first. Then the included HTML file also has an ng-include which also loads an HTML file.
The last included HTML file causes the div to suddenly expand in size and that makes the animation look jumpy and weird.
This problem could be solved if all the nested ng-includes could be preloaded somehow. Is something like that possible in AngularJS?
The code I have looks something like this:
My main view:
<div class="animation-grow-in animation-grow-out" ng-repeat="myList">
<div ng-include"base-partial.html"></div>
</div>
The base-partial.html file:
<div ng-switch="myList.type">
<div ng-switch-when="file1">
<div ng-include="'file1.html'"></div>
</div>
<div ng-switch-when="file2">
<div ng-include="'file2.html'"></div>
</div>
</div>
The file1.html and file2.html contain forms.
But because filex.html is loaded with a delay that makes it all look jumpy. So is there a solution for this problem? Can I preload all nested ng-includes?
You can use angularjs template caching service to cache your template. When boot strapping your application, put all your templates inside a cache so that it will not make XHR calls for your templates.
https://docs.angularjs.org/api/ng/service/$templateCache
I am using DocPad for generating static content for my blog. Lately, I have been blogging on AngularJS.
I seem to be having an issue with how DocPad is generating attributes for some tags like img, especially for two use cases.
First, I want to demonstrate how you should use the ng-src tag and NOT the src tag in an image. I demonstrate this by showing 404 errors on page load. So I have the following HTML in my markdown file
<td><img src="{{album.image}}" alt="{{album.album}} Cover Image" ></td>
to demonstrate this. However, during the DocPad processing it prepends the local directory to create
<td><img src="/2014/01/angularjs-lou-reed/{{album.image}}" alt="{{album.album}} Cover Image" ></td>
When the AngularJS engine processes the page, I get 404 errors on the images.
The second issue is when I use the ng-src attribute. During processing, I am guessing, that since the src attribute of the image tag is missing it adds a src attribute into the generated HTML.
So the HTML
<td><img ng-src="{{album.image}}" alt="{{album.album}} Cover Image"></td>
gets generated into
<td><img ng-src="{{album.image}}" alt="{{album.album}} Cover Image" src="/2014/01/angularjs-lou-reed/undefined"></td>
I am pretty new to DocPad and green with NodeJS. Any ideas where to look to resolve this? I think what I would like to do is if certain attributes contain AngularJS of {{ }} to skip the the normal processing.
You can see the generated page at
http://www.jptacek.com/2014/01/angularjs-lou-reed/