Develop Reference

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"
};
};

Cannot handover attrs.value to Directive's templateUrl function

Using Angular 1.6 I am defining an directive like so:
angular
.module('myApp')
.directive('lyEntity', lyEntity);
function lyEntity() {
return {
restrict: 'E',
scope: {
model: '=',
type: '#'
},
controller: 'lyEntityController',
controllerAs: 'vm',
bindToController: true,
templateUrl: function (elem, attrs) {
return 'components/_templates/' + attrs.type + '.html'
}
};
}
But using it in another template like so:
<ly-entity model="vm.entity" type="{{vm.type}}"></ly-entity>
will result in templateURL components/_templates/{{vm.type}}.html
How can I hand over the value of vm.type to be used in my templateUrl function?

Yeah, it can't be done the way you're trying to do it because templateUrl function is called before the attributes are interpolated. One way to achieve this would be using ng-include.
return {
restrict: 'E',
scope: {
type: '#'
},
link: function(scope, element, attrs){
$scope.templateUrl = 'components/_templates/' + attrs.type + '.html';
},
template: '<ng-include src="templateUrl"/>'
};
So, construct the template url in controller, have ng-include as the template and point the src to the constructed template url.
Here's a good article on how to have dynamic templates: https://medium.com/angularjs-meetup-south-london/angular-directives-using-a-dynamic-template-c3fb16d03c6d#.mizywdk6s

Thanks to #Chantu, I found a solution which is working for me:
Directive:
angular
.module('myApp')
.directive('lyEntity', lyEntity);
function lyEntity() {
return {
restrict: 'E',
scope: {
model: '=',
type: '='
},
controller: 'lyEntityController',
controllerAs: 'vm',
bindToController: true,
template: '<ng-include src="templateUrl"/>'
};
}
Controller:
$scope.templateUrl = 'components/_templates/' + vm.type + '.html';
and call it:
<ly-entity model="vm.entity" type="vm.type"></ly-entity>

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',

multiple directives show the same data(scope), how to stop this.

I have a ng-repeat that will repeat a directive which does a $http call. then it will display the returned data, but I can't seem to stop the directives from updating each other. Here is the idea:
MAIN
...ng-repeat='item in itemList'...
... my-directive item="item.url"....
my-directive template
...{{result.count}}..
this returns the template updated only when the scope has changed.
.directive('myDirective', function($parse, $http) {
return {
restrict: 'E',
scope: {
item : '='
},
replace: true,
transclude: false,
templateUrl: '...template...',
controller: function($scope) {
$http.get(item.url).success(function(data) {
result.count=data.count;
})
}
at times, the result .count is the same through out the ng-repeat. I will like to know if I am doing something wrong, or maybe there is a way around this?
note: I have checked the results from the http call, and they are different all the time. also there are no syntax errors.

Use link in the directive and isolate your scope like:
.directive('myDirective', function($parse, $http) {
return {
restrict: 'E',
scope: true,
replace: true,
transclude: false,
templateUrl: '...template...',
link: function (scope, element, attrs) {
$http.get(attrs.item).success(function(data) {
scope.result.count=data.count;
}),
}
}
})
Read more about link and isolated scopes on https://docs.angularjs.org/guide/directive
Like someone said on comments using that is not the best way cos you a doing a GET for each item so if you have 10 items you will do a GET 10 times. If you can do the get 1 time on your controller and fetch all the data that you need.

Get parameters from routeProvider in element directive

I have an element directive and I want to know if I can get parameters from routeProvider to render my template and set it up in my controller.
adminDash.directive('hospitals', function() {
return {
restrict: 'E',
templateUrl: 'www/partials/admin/hospitals.html',
controller: 'AdminHospitalsController',
controllerAs: 'hospitalsCtrl',
};
});
How can I get any parameters in my element directive?

You can isolate the scope of the directive, like this:
adminDash.directive('hospitals', function() {
return {
restrict: 'E',
templateUrl: 'www/partials/admin/hospitals.html',
controller: 'AdminHospitalsController',
controllerAs: 'hospitalsCtrl',
scope: {
paramValue: '&',
paramVariable: '=',
},
};
});
check this to understand better https://thinkster.io/egghead/isolate-scope-am/

There are 2 ways to do it: both involve using $routeParams service that allows you to retrieve current set of route parameters.
Given that you have an url: http://example.com/#/hospitals/foobar and a route /hospitals/:hospital/ configured in your $routeProvider, you can:
1.Inject $routeParams into your directive:
adminDash.directive('hospitals', function($routeParams) {
return {
restrict: 'E',
templateUrl: 'www/partials/admin/hospitals.html',
controller: 'AdminHospitalsController',
controllerAs: 'hospitalsCtrl',
link: function(scope, element){
scope.hospital = $routeParams.hospital;
}
};
});
2.Inject $routeParams into AdminHospitalsController
adminDash.controller('AdminHospitalsController', function($scope, $routeParams) {
$scope.hospital = $routeParams.hospital;
}
Both method will result in having hospital=foobar in your directive's scope;