Develop Reference

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!

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>

Angular 'this' not working inside directive controller

I have the following code. Why doesn't the vm.name work? Why is the this inside the controller not being detected? Haven't I defined a closed scope for the directive?
What am I doing wrong?
var mod = angular.module('myApp', []);
mod.directive('myObj', myObject);
function myObject(){
return {
restrict: 'E',
templateUrl: 'my-obj.html',
scope: {},
controller: myController
};
function myController(){
var vm = this;
vm.name="vfdfbdn";
}
}

To use this in controller inside directive you need to use controllerAs: 'ctrl' but then in template you will need to prefix all name with {{ctrl.name}} or you can use $scope like:
function myController($scope) {
$scope.name="vfdfbdn";
}

function myObject(){
return {
restrict: 'E',
template: '<div>{{c.name}}</div>',
scope: {},
controller: myController,
controllerAs: 'c'
};
function myController(){
var vm = this;
vm.name="vfdfbdn";
}
};
Please see this question to understand the things

You need to tell Angular how you are going to reference the this from the controller in the view.
function myObject(){
return {
restrict: 'E',
templateUrl: 'my-obj.html',
scope: {},
controller: myController,
controllerAs: 'ctrl'
};
}
Now you can reference everything that you assigned to this, that you named vm in your controller with ctrl.
I used ctrl to show that there is no correlation between the name you use to refere to it in the view, setted with controllerAs and the name you give to this inside the controller function. It is a normal to reference different controllers with different controllerAs references so you can now which controller they refer to in the view.

Try this:
function myObject() {
return {
restrict: 'E',
templateUrl: 'my-obj.html',
scope: {},
bindToController: true,
controller: myController
};
}
myController.$inject = ['$scope'];
function myController($scope){
var vm = this;
vm.name="vfdfbdn";}

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;

Setting template or templateUrl in Angular Directive based on user input

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>