I have a problem with the ng-include and the scope in Internet Explorer (10)
In Firefox and Chrome (Canary) it works perfect.
I have a main Controller which changes the templates and the title ($scope.title).
When I open the app the startpage.html is loaded into the ng-include and the title changes.
But all scope variables within the ng-include only show that (the html templates which are included have their own controllers):
{{menu.Dish}}
But only in Internet Explorer.
Does anyone have a suggestion what it could be?
I had the same issue and it was an bugg with Angular and the placeholder attribute of a textarea. I used this code and then it started to work:
<textarea ng-attr-placeholder="Description"></textarea>
Related
I have a custom directive (to exposecertain fields), and inside that I have another directive (the drop down box for the field). It's working well on Chrome, but on IE9 it appears the ng-show and ng-if is failing to evaluate. It appears not to even enter the function I defined (I put console.log inside the isAllowed function and it appears in Chrome but not in IE9).
<div>
<select id="" class="form-control" ng-model="measure" name="{{name}}">
<option ng-if="isAllowed(name, 1)" value="1">Kilowatt Hours</option>
<option ng-if="isAllowed(name, 2)" value="2">mmBTU</option>
<option ng-if="isAllowed(name, 3)" value="3">Therms</option>
<option ng-if="isAllowed(name, 4)" value="4">Decatherms</option>
</select>
</div>
I have tried ng-show instead of ng-if and it behaves the same in IE9. It appears the replace: true I put on my first directive is not honoured in IE9:
Whereas in Chrome this is replaced as expected with surrounding DIV elements and my custom directives cannot be seen anywhere, which is good.
Has anyone had experience of this before? Is it something to do with having a directive inside of a directive? Seems like IE9 does the first one OK then stops.
(I wish I could drop IE9 but it's an internal app and they're still on IE9 everywhere, so I've got to make it work somehow).
PS: The aim here is to only show the options that are relevant to the given field. In this case Electricity can be measured in kWh and mmBTUs but not in Therms and Decatherms. Inside the isAllowed function is supposed to be some switch logic. It works fine in Chrome, just not IE9, so I might need another method as a workaround.
PPS: Angular 1.3.2. IE9 - Browser Mode: IE9, Document Mode: IE9 Standards.
Figured it out. Isolated scope. Somehow Chrome was dealing with it OK, but IE9 was not.
In my app I have the fields I want to show to my user defined in a Partials module, but the drop-down lists is something I want to use in multiple places and they may change, so I defined them in a directive called BusinessRulesDirectives.
All I needed to do was drop in the BusinessRulesDirectives as a dependency to my Partials module and it works across both Chrome and IE9.
angular.module( 'ActualsPartials', [
'BusinessRulesDirectives'
] )
For some reason Chrome was able to run fine with this, but IE9 did not like it:
angular.module( 'ActualsPartials', [] )
Also, no errors were being output. I just happened to double-check for isolated scope as a wild guess.
Would be interested to know why Chrome was OK but IE9 was not.
Anyone managed to integrated supersize with angular js?
I tried creating a directive and placing the following code inside a directive
$.supersized({
//params :
supersize did work in creating the
<ul id=supersized" .... >
However my screen isn't displaying supersize's full screen slideshow. Any idea why?
I am using angular's ng-include like this :
main html:
<span ng-include="'tpl.html'" ng-controller="TplCtrl" onload="loadMe()"></span>
template tpl.html:
<h2>{{ tplMessage }}</h2>
the controller:
$scope.loadMe = function () {
$scope.tplMessage = 'template';
}
})
this was working fine with angularjs 1.1.5 but not anymore in 1.2.0 rc 3
here is a plunkr :
http://plnkr.co/edit/zYRevS?p=preview
any idea how to make this work with 1.2.0 ?
edit:
i saw this : https://github.com/angular/angular.js/issues/3584#issuecomment-25279350
but can't find the answer to this problem here.
ok i found the answer here : https://github.com/angular/angular.js/issues/3584#issuecomment-25857079
ng-include can't be on the same element as ng-controller. In 1.1.5, it was working
here is a working updated plunker with an html element wrapping the ng-include:
http://plnkr.co/edit/CB8jec?p=preview
It seems to have to do with you mixing 2 things on the same tag - it has both ng-include and ng-controller on it. put your span inside of a new one and move the ng-controller to the outside tag.
They might'of changed the order in which these attributes are processed. In general I think mixing them on the same tag is not a good idea.
Because it's just broken, and there is currently no workaround.
According to the change long:
"previously ngInclude only updated its content, after this change ngInclude will recreate itself every time a new content is included. This ensures that a single rootElement for all the included contents always exists, which makes definition of css styles for animations much easier."
but instead of being improved, it appears to have been broken.
According to the comments here the current implementation is broken.
Other sources will tell you the same.
I'm having a problem on how to load a dynamic view using Angularjs in anchor tags. By the way I can't use ng-view since ng-view can only be use once in a template. So I'm thinking of using the ng-src but on the sample docs it is using a select element tag and fetching its values to the controllers. What I want is when I click a link say the View1, the content of my div will change. I will explain further.
Say I have this 3 anchor tags
<li>View1</li>
<li>View2</li>
<li>View3</li>
Before
<div data-ng-include="" data-ng-src="default.html"></div>
Now when I click #/view1
//the ng-src of the html will change depending on the link clicked
<div data-ng-include="" data-ng-src="view1.html"></div>
Perhaps you are trying to do something as below:
HTML:
<!-- Dont use # in the hrefs to stop the template from reloading -->
<li>View1</li>
<li>View2</li>
<li>View3</li>
<div data-ng-include="selectedTemplate.path"></div>
JS:
$scope.selectedTemplate = {
"path":"view1.html"
};
ng-view is the main view of any Angular app, and is affected by the route changes. So all you anchor tags will only affect the ng-view template.
To load other partial views based on the main ng-view, ng-include is the correct way to go as you have mentioned already.
To load a view based on the main view (view shown in ng-view), you need to write mapping logic which depending upon the main view should load other partials (ng-include elements for page).
So your partial becomes like
<div data-ng-include='templateNameVariable'></div>
This variable has to be set whenever the ng-view changes on location change.
You can watch for $route $routeChangeSuccess event and change the templateNameVariable based on the active route (hence the view).
So there should a controller out side the ng-view directive which will orchestrate this, and you would do
$scope.$on('$routeChangeSuccess',function(event,current,previous) {
//Change the templateNameVariable to point to correct template here, based on current route.
});
I have a directive which loads content from an external HTML file. Passed into this directive is some scope data which is used in the rendering of that HTML fragment. e.g.
<div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}">
<!-- remainder of content here -->
</div>
What I would like to do within this directive is to load a further HTML partial within this based on the original scope data passed into the directive. I can't seem to get this to work, but it should be something along the lines of the following:
<div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}">
<!-- remainder of content here -->
<div ng-include="partials/{{obj}}.html></div>
</div>
Using this, the file doesn't get included, but I don't get any errors either. Can anybody assist me here?
NB: I read this, which is a similar issue, but hasn't helped me.
UPDATE - I noticed in Chrome dev tools that the URL is being resolved as expected, but the file contents are not getting included. I thought from the docs that ng-include loaded and compiled the requested fragment, so I was expecting this to work.
Found a solution in the end, by declaring the following in the directive:
<div ng-include src="view.getView()"></div>
and the following in the directive controller:
$scope.view = {
getView: function() {
return "partials/" + $scope.obj + ".html";
}
};
Works perfectly now!
In comment on the comment of Shane Gadsby: it is not <div ng-include src="'partials/'+{{obj}}+'.html'"></div> but <div ng-include src="'partials/'+obj+'.html'"></div>.
Your comment explains why 'this is what you need to force it from object literals to a string', so everything not in single quotes is handled by the compiler as a scope object.