Is there a way to trace an object in to the screen ?
I am coming from rails where you can do
<%= debug #var %>
Is there something similar to angularjs ?
console.log(some_var) will print the object to your browser's console.
Better yet, use Firebug or Chrome Inspector and debug with breakpoints.
use {{ var }} on your html page, then set the var in your controller as $scope.var.
Related
I am slightly confused by this behaviour of Angular JS.
Angular.js' ng-if will not render an element if the expression evaluates to false, if the documents are anything to go by. I have this piece of code in my html template:
<div ng-if="false">
<img src="{{ imgPath }}" />
<p>This block is not rendered</p>
</div>
// In the controller
$scope.imgPath = "/invalid/image/path";
When this template is rendered, I cannot, as expected, see the img element or the p element on developer tools:
However... when I look at the network tab, there is a request to fetch the image:
I thought that if the element is not rendered, it wouldn't function in any way or form since it doesn't exist... Why does the browser fetch the image in this case?
You can see the working code on plnkr here, you'll have to hit F12 to watch the error on the console.
I know that using ng-src= {{ }} instead of src={{ }} would solve the issue of img src being fetched with unresolved expression before the data is bound, but, this question deals more with why ng-if isn't stopping the request in the first place
It takes AngularJS a small amount of time to process your markup. So, intially when your page loads, the browser does it's thing trying to process the markup. It sees this:
<div ng-if="false">
<img src="{{ imgPath }}" />
<p>This block is not rendered</p>
</div>
But, so far, AngularJS has not been loaded, and the AngularJS directives have no meaning. The browser attempts to load an image located at the literal URL of : {{ imgPath }}, which the URL encoder will translate to %7B%7B%20imgPath%20%7B%7B, which will fail (obviously). Still, AngularJS has not been loaded.
Once AngularJS finally loads, it goes through the DOM and applies the ngIf directive and removes the node.
This is why you want to use ngSrc. This will prevent the image request, since the browser doesn't understand the ng-src directive and won't treat it like a src attribute.
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 just want to use different interpolator for rendering bound values in HTML page..
But in IE9 browser, my interpolators <% %> are not working at all ...
I have created a fiddler enter link description here
Please help me resolving this issue..
regards
Ram
IE9 will interpret any symbol starting with < as a tag, which means that you will have to use other symbols if you want this to work on IE9.
You could try soomething like (( )) instead.
Example
I am trying to display some HTML in my web page and using the following:
xx {{ pageHtml }} yy
<div data-ng-bind-html-unsafe="$scope.pageHtml"></div>
The data between xx and yy shows up as raw HTML but what I want is to not show it as raw. I used the code on the second line but nothing shows.
Is there something I am missing? Did something change in 1.2 because I thought this was working before?
Update - I do 100% trust the HTML and don't want to clean it. There will be code inside the HTML that needs to show on the screen.
By default the innerHTML-ed expression result is sanitized using the $sanitize service which would require you to include ngSanitize in your module's dependencies.
<div data-ng-bind-html="pageHtml"></div>
However if you trust the HTML to be safe, you can bypass sanitization using $sce service that you would inject in your controller:
$scope.someSafeContent = $sce.trustAsHtml("<i>Hello</i> <b>World!</b>");
HTML:
<!-- bypasses sanitizaton -->
<div data-ng-bind-html="someSafeContent"></div>
Controller
myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
In View
This will resolve your problem.
I can't get Ext.get to work in IE. Works great in FF, Chrome and even Safari.
My HTML looks like this:
<select id="products" onchange="getReleases()">
<option value="select">Select</option>
</select>
The Ext call is this:
...
success: function(response) {
alert("response.responseText: " + response.responseText);
Ext.get("products").update(response.responseText);
}
I see results in my alert function. What am I missing?
It doesn't appear as if this is an actual issue with Ext but an issue with IE. You can see this by looking at the result of Ext.get("products") to a variable.
var result = Ext.get("products");
console.log(typeof result !== "undefined");
We can see from the log statement that it result is not undefined (Also, if it was undefined it wouldn't have been able to do the update()).
This is all assuming that the response.responseText was of the form '<option value="select">Select1</option>' which I think it was because you were getting it to work correctly in all browsers but IE.
Looks like it is a known issue with IE's select element's innerHTML property. Following provides explanation and link for work around:
Javascript - innerHTML not working with HTML select menus
Here is a link to the MS bug: http://support.microsoft.com/kb/276228