I've got a list of pop-ups/dialogs (enclosed in divs) that I want to place in a single HTML file and from there reference in different directives representing those pop-ups. As far as I know, AngularJS directive's templateUrl normally reference an HTML file. Is it possible to reference a single div within HTML for templateUrl? If it is, how to do it?
If your template fragments are small, you can reference them from within your JS by using the template: parameter instead of templateUrl:. However, in my projects, I reference all the template partials by templateUrl and use a grunt task to preload all the individual HTML files into one Javascript file that is then loaded by Angular into the template cache. You can read more about it here.
You can do the following:
Add the div's as a <script> and add the attributes type="text/ng-template" and id="", then when you set the templateUrl:, you pass the id from the script element.
Example:
HTML:
<script type="text/ng-template" id="template/awesomeDiv.html">
<div>
(...)
</div>
</script>
Directive:
templateUrl: 'template/awesomeDiv.html'
NOTE:
In order to use this, you need to have nested directives, so the parent directive includes your HTML with all divs, and the children uses the ng-template'd divs
Related
Let's say I am using a custom directive named my-form-data:
<my-form-data info='infoObj1' template="ssc.html"/>
<my-form-data info='infoObj2' template="college.html"/>
Inside directive definition, I want a different templateUrl based on the template attribute of the directive on the HTML page.
Is there any way to specify the controller class associated with ssc.html and college.html?
Use different directives. Its just a couple lines of code and they'll have their own template HTML. They can all share the same controller if desired or have their own. It doesn't make sense to try and use the same directive if you have different views and different controllers.
To answer your question directly, you can specify the controller in your directive HTML using ng-controller.
ssc.html
<div ng-controller='sscCtrl'>
...
</div>
college.html
<div ng-controller='collegeCtrl'>
...
</div>
i'm storing a html string in a scope object and want to pass it to a variable
$scope.template1 = "div ng-include="'/app.html'" </div>"
Then i want to pass this template1 to my bootstrap template option with the output of $scope.template1
tour.start{
template:$scope.template1// Here i'm looking the output with the content of app.html
}
How can i compile template1 and pass the output?
Simply use the $compile service:
$scope.template1 = $compile("div ng-include="'/app.html'" </div>")($scope);
This way, your template will contain your ng-include content
(remember to add $compile to your dependencies).
By the way, I recommend that you use $templateCache service to store your static content in javascript, in order to have a unique place (and optimized too!) to store your templates:
app.run(function($templateCache) {
$templateCache.put('app.html', '<span> app.html content </span>');
});
and your ng-include will find automagically your app.html template.
You should do this also for your template1 variable, and retrieve it in your JS by using:
$templateCache.get('template1.html')
I retrieve the code of an HTML page from a server thanks to a rest service and I want integrate the html code into an empty template
.controller('TestController', ['$scope' ,'$rootScope' , '$sce' , function ($scope ,$rootScope,$sce) {
var restHtml =$rootScope.test; //contains <div>Test</div>
$scope.showHtml= $sce.trustAsHtml(restHtml );
}]);
The template
<div ng-bind-html="showHtml"></div> <!-- didn't work and i want a solution without integrate my html code into a existing div -->
Thank you
Ideally DOM manipulations should not happen in the controller, directives should be used for them.
To answer your question, you could compile the html into your tag. Get the html, find the element you want to insert the html in and use compile to do it. A good example of compile.
I have a DOM element called .nav-bar. I want to add a class to it from another Angular controller that has it's own $scope. Is such a thing possible?
I have a navigation bar that needs to be loaded one of several controllers. Depending on which controller / view loads it, it has to have a class conditionally applied.
It sounds like your navigation bar should be its own directive and live outside the scope of those controllers. I have solved a similar problem by letting my main module own that directive and spin it up and having my controllers live in separate modules that are injected into the parent app.
The best solution for conditionally classing it is to look at the route params or the location in the directive link or controller and figure out which controller they are on and set a scope variable that reflects it. Then, in the view, use ng-class to set the proper class depending on the variable's value.
Here is an example of how you could change a class on the body element from anywhere. Create a top level AppCtrl and put it on the html element like this:
<html lang="en" ng-app="myApp" ng-controller="AppCtrl as appCtrl">
<body class="{{ appCtrl.appService.cssClass }}"></body>
</html>
myModule.controller('AppCtrl', ['appService', function(appService) {
this.appService = appService;
}]);
Then have an of AppService which is injected into the AppCtrl and the service is assigned this.appService in the controller. The service can contain a property to contain the class you want to assign. Now you can assign the class from anywhere by injecting appService. You could do something similar on any element, it doesn't have to be on the html/body elements.
I think the "Ctrl as ctrl" syntax requires at least Angular 1.1.5.
In my app I have a Main controller, within the template/view for that controller I call a second controller thru <div ng-controller="BasketCtrl"></div>. But how do I tell 'BasketCtrl' to use a certain view/template?
I don't want to use this "basket" within my '$routeProvider' since it will be used accross my site.
The basket will be a section of each template that shows the contents of a shoppingcart. Therefor I don't want to create the neccessary HTML within the DIV, that will lead to duplication of a lot of code...am I getting something wrong here perhaps?
I would create a basket directive. Something like this:
app.directive('basket', function(){
return {
templateUrl: 'basket-template.html',
link: function(scope, element, attr){
}
}
});
You could then include it in as many templates as you'd like. Read more about directives here: http://docs.angularjs.org/guide/directive
Just template the BasketController inside of the div that you added the ng-controller to. It is a nested template.
<div ng-controller="BasketCtrl">
<!-- put template inside of basketctrl -->
</div>
Alternatively, if you want your basketctrl inside of another file, you could do an ng-include inside of your BasketCtrl and include a link to that template:
<div ng-controller="BasketCtrl">
<div ng-include="'foo/bar/BasketTemplate.html'">
</div>
make sure to use both the double quotes and single quotes in there. Otherwise it won't work.