Setting template or templateUrl in Angular Directive based on user input - javascript

I have simple directive like this :
app.directive('sample',function(){
return{
restrict:'E',
template:'Hello sample',
templateUrl:''
}
});
i want when user declare templateUrl in tag like this :
<sample template="some url"></sample>
use templateUrl but if nothing set use default template in directive

template and templateUrl can be specified as functions taking two arguments - tElement and tAttrs.
An easy way is to move your default template and perform your logic in the templateUrl function:
app.directive("sample", [
function() {
var defaultTemplate = 'default.html';
return {
restrict: 'E',
templateUrl: function (tElement, tAttrs) {
return tAttrs.template || defaultTemplate;
}
}
}
]);
Demo: http://plnkr.co/edit/rrPicuzzb6YF4Z6yh3Rn?p=preview

I suggest using transclude:
app.directive('sample',function(){
return {
restrict:'E',
transclude: true,
template:'Hello sample <div ng-transclude></div>
};
});
HTML
<sample>
<div ng-include="some url"></div>
</sample>

Related

Using getTrustedHtml method to get html from a url

I am trying to retrieve html code from a URL to use as my templateUrl and using getTrustedHtml to do it, however, I'm receiving a $sce:unsafe error.
app.directive('showResult', ['$sce', function($sce){
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: $sce.getTrustedHtml('https://raw.githubusercontent.com/aidanhall21/aidanhall21.github.io/master/showResult.html')
};
}]);
Here is a working solution for you: http://jsfiddle.net/yvbenitah/U3pVM/57716/
2 things:
you need to use trustAsResourceUrl, because you want to access a remote URL: angularjs doc.
directive will be like this:
.directive('showResult', ['$sce', function($sce){
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: $sce.trustAsResourceUrl('https://raw.githubusercontent.com/aidanhall21/aidanhall21.github.io/master/showResult.html')
};
You have to do the binding correctly if you want the string to be displayed.Where the directive will be used, you have to do
.controller('testCtrl', function($scope){
$scope.coucou = {name:"A NAME HERE"};
})
and in your html:
<show-result info="coucou"></show-result>
enjoy!

Unable to render directive template properly in angularjs?

Here is the directive
module.exports = ()=>{
return {
restrict: 'E',
templateUrl: "/components/event/event.html",
scope: {index: '#'},
controller: "eventCtrl"
};
};
The code for controller
module.exports = ($scope)=>{
console.log($scope.index);
$scope.loadDetails = ()=>{
console.log("hello there");
}
};
and for template
.event
h3(ng-bind="index.title")
p(ng-bind="index.description")
.price(ng-show="index.is_paid") {{cost}} $
a.button-primary(ng-click="loadDetails()") Details
The problem is the variables are not being rendered in the template. I tested if it is being passed correctly using console.log and i am getting proper response. Also the function loadDetails() is working properly leading me to believe that there is not problem with setting up the controller. Where exactly am i going wrong ?
You have to change your scope: {index: '#'}, cause # mean it is for string ..so try with :
module.exports = ()=>{
return {
restrict: 'E',
templateUrl: "/components/event/event.html",
scope: {index: '='},
controller: "eventCtrl"
};
};

How to bind a directive from the Controller into the HTML?

Suppose i have a directive CARD
.directive('card', [function() {
return {
restrict: 'E', // Element directive,
templateUrl: 'scripts/directives/card.html'
};
and a controller say CARDCONTROLLER
.controller('cardController',function($scope){
$scope.directivename = 'card';
});
and a HTML file say CARD.HTML
<div>
<{{directivename}}></{{directivename}}>
</div>
But the above doesnot work.
Does any one have any idea about how to accomplish this?
EDIT.
I dont want to generate the directive dynamically.Its just that i want to bind it through the controller without/with changing anything in directive
you must add the controller to your directive.
.directive('card', function() {
return {
restrict: 'E', // Element directive,
templateUrl: 'scripts/directives/card.html',
controller: 'cardController'
}
})
this should do the trick.
call your directive like,
<div>
<data-card>
// add code
</data-card>
</div>
You can define controller in your directive also
.directive('myDirective', function() {
return {
restrict: 'E',
templateUrl: 'scripts/directives/card.html',
controller: function($scope) {
//write your controller code here
},
controllerAs: 'myController'
};
});
see the below snippet , you will get idea how you can do this.
var app = angular.module('myapp',[]);
app.directive('card',function() {
return {
restrict: 'E', // Element directive,
template: '<h5>I am directive template</h5>'
};
});
app.controller('cardController',function($scope,$compile,$element){
$scope.directivename = 'card';
var template = $compile("<"+$scope.directivename+"/>")($scope);
$element.append(template);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="cardController">
</div>

Set controller and controllerAs to the same string

Say you have an AngularJS directive in which you want to set the controller attribute and the controllerAs attribute to the same string.
Ex.
angular.module('blahModule', [])
.directive('blahDirective', function(){
return {
restrict: 'E',
controller: 'blahController',
controllerAs: 'blahController',
templateUrl: 'blah/blah.html'
}
});
The above is valid and works, but it feels redundant to when setting the controller and controllerAs value to the same thing. Is there way to do it in one attribute? Like:
angular.module('blahModule', [])
.directive('blahDirective', function(){
return {
restrict: 'E',
controllerAndControllerAs: 'blahController',
templateUrl: 'blah/blah.html'
}
});
Thanks in advance!
You can use
controller: 'blahController as blahController',

using expression for controller name(ng-controller) in a directive in AngularJS

Instead of specifying controller name using ng-controllerI want to specify controller name via an attribute in the directive and then replace it in the template(I want to do it this weird way just to explore AngularJS).
Here is the link to the plunk:
http://plnkr.co/edit/KZgLQ6?p=preview
e.g. of what I am trying to do
<sample-drtv ctrl-name="drtvCtrl"></sample-drtv>
template(sampleDrtv.html):
<div ng-controller="{{ctrlName}}">
<p>{{ptagcontent}}</p>
</div>
Directive code:
var myModule = angular.module('ng');
myModule.directive('sampleDrtv',[function(){
return {
restrict: "E",
replace: true,
templateUrl: "sampleDrtv.html",
scope: {},
controller: function($scope,$element,$attrs){
$scope.ctrlName = $attrs.ctrlName;
console.log($scope);
}
};
}]);
function drtvCtrl($scope){
$scope.ptagcontent = "AngularJS Rocks";
}
I am getting this error on my console:
Error: Argument '{{ctrlName}}' is not a function, got undefined
Any ideas on what should I do so that ctrlName is replaced in the expression? I am sure I do not understand concepts of directives completely and so I am doing a mistake?
I would recommend this structure :
<sample-drtv></sample-drtv>
template(sampleDrtv.html):
<div ng-controller="drtvCtrl">
<p>{{ptagcontent}}</p>
</div>
AngularJS Part:
var myModule = angular.module('ng');
myModule.directive('sampleDrtv',[function(){
return {
restrict: "E",
replace: true,
templateUrl: "sampleDrtv.html"
};
}]);
function drtvCtrl($scope){
$scope.ptagcontent = "AngularJS Rocks";
}
See the Plunk: http://plnkr.co/edit/GwnqK6?p=preview

Categories

Resources