I am passing ng-controller attribute in my ng-template script tag as,
<script type="text/ng-template" id="dirTemplate.html" ng-controller="tmplCtrl">.
But the variables inside controller scope are not available inside the template.
Jsfiddle for the above code is available at, http://jsfiddle.net/HB7LU/21925/
You can do it one of 2 ways but not how you're currently doing it.
add the ng-controller to the div consuming the ng-include
<body ng-app="myApp">
<script type="text/ng-template" id="dirTemplate.html">
{{tmplValue}}
</script>
<span ng-include="'dirTemplate.html'" ng-controller="tmplCtrl"></span>
</body>
http://jsfiddle.net/HB7LU/21927/
OR
add the ng-controller in a nested div inside your template
<body ng-app="myApp">
<script type="text/ng-template" id="dirTemplate.html">
<div ng-controller="tmplCtrl">{{tmplValue}}</div>
</script>
<span ng-include="'dirTemplate.html'"></span>
</body>
http://jsfiddle.net/pkpbwee9/1/
Related
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 a div
<div class="error-text" ng-if="customerIdLength > customerIdMaxLength" ng-init="error='yes'" >Error presented</div>
here ng-if is working properly.
But
Based on ng-init value i am disabling a button like this:
<button class="btn btn-success" type="submit" ng-click="submitNumber();" ng-disabled="error=='yes'">Submit</button>
this is not working. If i am putting this ng-init to some other element which don't have ng-if then it is working properly. So what is the reason behind?
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body data-ng-controller="testController">
<div class="error-text" ng-init="$parent.error='yes'" ng-if="1 > 0">Error presented</div>
<button class="btn btn-success" type="submit" ng-click="submitNumber();" ng-disabled="error=='yes'">Submit</button>
<script>
// Code goes here
angular
.module('myApp', [])
.controller('testController', ['$scope',
function($scope) {
}
])
</script>
</body>
</html>
you need to use $parent to get inner scope inside ng-if.
The difference between ng-if and ng-show is that ng-if actually REMOVES the html element attached to it from the DOM, causing your ng-init expression not to be executed.
Simply replacing it by ng-show should do the trick
<div class="error-text" ng-show="customerIdLength" ng-init="error='yes'">Error presented</div>
I think the logic is sound but it might be missing some angularjs setup and configuration like ng-app and ng-controller declaration in the markup.
Ensure that this is declared at the top
<div ng-app="github" ng-controller="githubRepos">
<!-- Your code -->
</div>
Solution
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 ng-app="notesapp">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Edit
For making small code like this work, we can actually define an empty ng-app.
Eg: <html ng-app = "">
If you however want to define ng-app with some value, we need to load that ng-app in javascript. It can be done in a separate js file or in the same html file with <script></script> tag. Please see below:
<script>
var app = angular.module('notesapp', []);
</script>
Please close the script tag in your head. Also angular needs ng-app for its functioning. Please use ng-app on the tag which encloses your angular content.
<html ng-app="notesapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<script>
var app = angular.module('notesapp', []);
</script>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Also, as you know, Sublime is just an editor. It has nothing to do with angular. Cheers.
i'm new to angular, so started with very basic example, but this is also not working. so please help me out. below code should write the content of textbox to the page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head ng-app>
<title></title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-model="name" />{{name}}
</div>
<script src="/script/angular.js" type="text/javascript"></script>
</body>
</html>
ng-app should be inside html or body, inside whichever tags you intend to use angular.
In your code ng-app scope is ending with in head tags only. You haven't used ng-app at root level. You can use it at html or body or main div tag level. And there is no ng-controller in your markup. Of course you can also configure controller through js file also.
You use below code.
HTML
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"> </script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
Name: <input type="text" ng-model="name" />{{name}}
</div>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
ng-app should be in html tag, not head.
put ng-app in tag, not in head tag
Remove ng-app directives which is added to head tag and assign it to html