I have the below html
<body>
<div id="container" ng-controller="mainCtrl">
<div id="header" ng-include src='"partials/header.html"' ng-controller="headerCtrl"></div>
<div id="content" ng-include src='"partials/content.html"' ng-controller="contentCntrl" style="overflow: hidden;"></div>
</div>
</body>
In this main.html I am loading two partial view below as
header.html is below as
<canvas id="headerCanvas"></canvas>
content.html is below as
<canvas id="contentCanvas"></canvas>
In the headerCtrl when I write $('#headerCanvas')[0] I am getting undefined.
Not sure as of now why it is happening, please help
This is because when you are intializing the controler the html is not loaded yet form the ngInclude. what you can do is to use the onLoad event of the ngInclude.
<div id="header" ng-include src='"partials/header.html"' onload="onHtmlLoaded()" ng-controller="headerCtrl"></div>
and then in the header controler headerCtrl
var headerCtrl=function (){
$scope.onHtmlLoaded(){
// you have $('#headerCanvas')[0] here
}
}
Related
I have a html pages i have included a header in all html page
header contains menu and there i am using a tag
header.jsp
<div class="navbar navbar-default navbar-fixed-top" role="navigation"<ng-app="myApp" ng-controller="headerController">
.....
</div>
and in another html pages I am including this menu like
<html>
<body>
<div id="header">
<jsp:include page="/pages/common/header.jsp"/>
</div>
<div class="container" ng-app="myApp" ng-controller="bodyController" >
..............................
</div>
</body>
</html>
This is general structure for all my pages
My problem is at a time both controller is not running for any page if header page controller is working then bodyController is not running, when i comment to header controller the body controller works.
I am using angular 1.6.5
How to resolve this problem?
I would suggest this:
<body ng-app="myApp">
Then remove the ng-app from everywhere else.
Your header.jsp file has spelling mistakes in it which is why you have the problem, and you have two ng-app's (which is why I suggest putting it in one location, on the body tag).
I am trying to create nested KendoGrid using Angular template but for some weird reason Child Grid is not getting created when used inside Angular Template
<script type="text/ng-template" id="my-tmpl">
<div k-detail-template>
<kendo-grid options="childOption"></kendo-grid>
</div>
</script>
<kendo-grid options="mainGridOptions">
<span ng-include="'my-tmpl'"></span>
</kendo-grid>
Here is the plunker for the same http://embed.plnkr.co/fLwZrSaNZwLn0RRYanOU/
I believe you can make it work if you include only the SUB GRID in the template and leave the k-detail-template directive in the main HTML like this:
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<script type="text/ng-template" id="my-tmpl">
<kendo-grid options="childOption"></kendo-grid>
</script>
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<span ng-include="'my-tmpl'"></span>
</div>
</kendo-grid>
</div>
</div>
I tried in your plunker and it works.
Hope it helps (even though is somewhat late)
i have code like this
<div ng-app="">
<script type="text/ng-template" id="/tpl.html">
I am from a template.
</script>
<div ng-include="'/tpl.html'"></div>
</div>
<script> angular.module('a', []);</script>
<div ng-app="a">
<script type="text/ng-template" id="/tpla.html">
I am from a template a.
</script>
<div ng-include="'/tpla.html'"></div>
</div>
<script> angular.module('b', []).controller('myCtrl', function ($scope) {});</script>
<div ng-app="b" ng-controller="myCtrl">
<script type="text/ng-template" id="/tplb.html">
I am from a template b.
</script>
<div ng-include="'/tplb.html'"></div>
</div>
the output is :
I am from a template.
why when i use "ng-include" inside a module it doesn't work? do i missing anything?
Angular considers only the first found ng-app attribute when it bootstraps the application. The second one ng-app="a" is simply ignored.
If you want to have multiple Angular applications on the same page, you will need to bootstrap them manually (without using ngApp directive) using angular.bootstrap method.
Html
<script type="text/ng-template" id="ProfileTemplateHTML" >
<div class="container profilepopup-cont" align="center">
<div class="row">
<div class="col-sm-3 zero-margin-padding" align="center">
<img id="DisplayImage" ng-src={{model.picLarge}} class="img-circle">
</div>
...
</script>
In this html template file i have to call a directive.My directive name is 'help'.But if i add to call the directive it is not working.
how to call a directive inside html template in angularjs?
You can add the directive in these ways
As an attribute
<div help>
...
</div>
As a separate tag
<page>
//your code
</page>
I'm not sure i fully understand the question.
here is a jsfiddle to demonstrate how to use custom directive inside ng-template.
or try this..
angular.module('demo', [])
.directive('help', function() {
return {
template: '<div>Help! {{info}}</div>',
scope: {
info: '#info'
}
};
})
.controller('MainCtrl', ['$log',
function($log) {
this.hello = 'This is MainCtrl';
this.template = 'profile-template.html';
//construct
$log.debug('DemoCtrl has been loaded');
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demo">
<script type="text/ng-template" id="profile-template.html">
<div>this is profile-template.html</div>
<div help info="this is directive info."></div>
</script>
<div ng-controller="MainCtrl as main">
<h2>just a demo</h2>
<div>{{main.hello}}, include template from {{main.template}}</div>
<hr>
<div ng-include src="main.template"></div>
</div>
</body>
I prepared a template as the following
<script type="text/ng-template" id="spinner.html">
<div class="spinner">
<div class="bounce1 spinner-bounce"></div>
<div class="bounce2 spinner-bounce"></div>
<div class="bounce3 spinner-bounce"></div>
<div class="bounce4 spinner-bounce"></div>
<div class="bounce5 spinner-bounce"></div>
</div>
</script>
<!-- a couple of lines below -->
<div spinner> </div>
with the following directive
app.directive('spinner', function ($window) {
return {
restrict: 'A',
templateUrl: '#spinner.html'
};
});
So, directive itself and its template are in the same html, tempateUrl is not loading ng-template I defined above.
What is wrong with this? I tried template too but it didn't work too.
I realize the problem.
It's because I added text/ng-template template in the <head> tag, not <body> tag. In my case, it doesn't find my template and searches for /spinner.html on the server.