<script type="text/ng-template" id="popupTemplate">
<div id="myPopup">
<input type="checkbox" name="backup"/><label for="backup">Backup</label>
</div>
</script>
I want to access the popup div from outside script for adding more check boxes dynamically. I tried using jQuery $("#myPopup") but it is not accessing the element. Is there any way to achieve this?
The template written inside <script type="text/ng-template"></script> will be stored in $templateCache with the given id.
Retrieve the template in your controller using -- $templateCache.get('popupTemplate')
Update it.
Add it back to the $templateCache using -- $templateCache.put('popupTemplate', '__updatedContent__')
Related
I have the following html in an angular controller
<div ng-include="'Module.' + entry.Module.View + '.template'"></div>
The value of entry.Module.View is "TextField".
Inside the same controller this script tag exists:
<script type="text/ng-template" id="Module.TextField.template">
<label>{{entry.Label}}</label>
<input type="text" ng-model="entry.Value">
</script>
The problem is that this tries to load the template from an external source. Is there another tag or method better suited to load an inline script template from a variable?
You can create a variable in controller and use ng-include as an element instead of attribute.
<ng-include src="moduleUrl"></ng-include>
And in controller, you have something like (or if you use vm, change it accordingly)
$scope.moduleUrl = 'Module.' + $scope.entry.Module.View + '.template';
Its day-2 I have started learning angularJS. I got to know
In an Application ng-app will be same for all or its a definition for the application.
A ng-app can have more than 1 ng-controller.
Based on controller name we can move the control to its implementation.
An application may have more than one div tag and every div may have different controller.
From above understaning I have written below sample code to test:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="expressions" >
<div ng-controller="NGExpressionController">
<h1>This is AngularJS Expression example.......</h1>
<p>On String expression...</p>
Name: <input ng-model="name" type="text"></input></br>
Your name is {{name}}
</div>
<div ng-controller="NGExpressionControllerTwo">
<h1>This is AngularJS Expression example.......</h1>
<p>On String expression...</p>
Name: <input ng-model="adddress" type="text"></input></br>
Your name is {{address}}
</div>
<script>
angular.module('expressions', []).controller('NGExpressionController',function($scope){
$scope.name="Test Name";
});
</script>
<script>
angular.module('expressions', []).controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";
});
</script>
</body>
</html>
But above piece of code showing below error:
https://docs.angularjs.org/error/ng/areq?p0=NGExpressionController&p1=not%20a%20function,%20got%20undefined
Where I am going wrong? Is my understanding is wrong or code implementation is wrong.. Any form of help would be a great help.
You're implementing it twice (2 <script> tags) which means he won't recognise the first one anymore.
Working Plnkr: https://plnkr.co/edit/eeFddCQSBg5Lm7SOyZH0?p=preview
<script>
angular.module('expressions', []).controller('NGExpressionController',function($scope){
$scope.name="Test Name";
}).controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";
});
Using <script> to load controllers however is never a good practice, but since it's only your second day learning Angular, I'll leave it like that :) Anyway, you can always use https://www.codeschool.com/ You'll learn by doing.
first your code has some errors , due incorrectly defining the module,
<script>
angular.module('expressions',[])
.controller('NGExpressionController',function($scope){
$scope.name="Test Name";
})
.controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";
});
</script>
when creating an app you have to define a module once, and after defining a module you use that module by calling correctly module object,
for creating module use
angular.module('yourModuleName',[])
to use that module again use
angular.module('yourModuleName')
no need of [ ], Square barckets, it used for defining dependencies for that module ,and when putting it wil result in re-initialising module again , and you will losse previously defined module properties,
1 : ng-app directive will initialise an angular app, and it will be available for the whole app. anyway we can manually create (bootstrap) multiple angular apps in a single application link
2 : An ng- app can have multiple Controllers , we can create our controllers and bind them whith any dom elements as we want .
<div ng-controller="NGExpressionController">
{{name}}
<div ng-controller="NGExpressionControllerTwo">
{{address}}
</div>
</div>
3 : based on the defined controller we can manipulate our logic or functions for the corresponding dom elements
4 : obviously yes , and you can nest your controllers to make use of $scope inheritance too. , be sure to use them wisely ...
happy coding...
How can I add code inside ng-view once(not inside all partials)? I want to have global block which will append or prepend inside ng-view, where I can use scope from current controller.
you can use ng-include inside each template to include the same template in all parts.
dunno know really what you want to do, but with the little info you gave, go to your index.html template and write the code you want to within a block element such as
<div class="your class name">
...
</div>
either before or after
<div ng-view>
</div>
depending on whether it's prepend or append. However, make sure you reference the controller properly.
I have a script tag in my DOM that contains a template like the folllowing:
<body>
<div ng-insert='ui'></div> <!--inject ui here-->
<script id='ui' type='text/html'>
<div ng-model='name'></div>
</script>
</body>
...and I wish to add it into the DOM using a directive like the ng-insert I made up above.
I haven't found a built in one to do this yet. ng-include seems to only load in remote templates. I think this would be a reasonably simple directive to write, which I may try, but I wanted to make sure I'm not reinventing something that already exists.
ng-include can be used in combination with predefined templates using type="text/ng-template" on a script tag.
<script type="text/ng-template" id="templateId.html">
This is the content of the template
</script>
Note: the script tag containing the template does not need to be included in the head of the document, but it must be below the ng-app definition.
later use this to get the template:
<div ng-include="'templateId.html'"></div>
Note: the template's name is in single quotes, as a string.
You can also get this template via JavaScript:
$templateCache.get('templateId.html')
Refernces:
http://docs.angularjs.org/api/ng.directive:script
http://docs.angularjs.org/api/ng.$templateCache
I think ng-include and script type="text/ng-template" is what you're looking for
http://jsfiddle.net/mrajcok/MfHa6/
PROBLEM
I have a dom element, which i want to detach it from its parent and append it at some other location in the dom, angularjs way.
i could easily do this in jquery with detach and appendto, but i am unable, to find the same in angularjs way.
var detached = jQuery('.toBeDetached');
jQuery('.itemMaximixed').append(detached);
Note i need to detach since the element contains a map in it.
It may not be applicable in your case, but you can use the transclude facility of an Angular directive to do this.
I don't think attaching and deattaching would work. What I can suggest is destroying the recreating the template under different node.
You can use something like ng-if in Angular 1.1.5 for this. Using multiple ng-if and associated conditions you can bind the same template at multiple location, which ever ng-if returns true that template would get loaded.
The template code can be duplicated or be out inside a ng-template script. Something like this
<div id='parent'>
<div id='child1'>
<div ng-if='condition1'><ng-include src='datatemplate' /></div>
</div>
<div id='child2'>
<div ng-if='condition2'><ng-include src='datatemplate' /></div>
</div>
</div>
<script id='datatemplate' type='text/ng-template'>
<!-- Template HTML -->
</script>