We Keep Coding

AngularJs directives - Need to get attribute value in templateUrl

I need to get append directive attribute value to templateUrl.
I tried several options however, templateUrl does not support $observe in it.
Therefore I tried below and tried to get "devicePath" value to templateUrl.
Nothing worked.
Here is my example.
<me-direct device-path="{{contentUrl}}" tmp-url="{{appTemplateUrl}}"></me-direct>
Directive js file
angular.module('meDevices').directive('medirect',medirect);
function medirect(){
return{
scope:{
devicePath:'#'
},
restrict: 'E',
controller: 'directCtrl',
link: function(scope, element, attrs) {
// some ode
attrs.$observe('devicePath', function(value){
console.log(value);
scope.url = value;
console.log(scope.url);
});
},
templateUrl: scope.url
}
}
Anyhow, this is not working since scope.url is not accessible from templateUrl. Any thoughts??
EDIT
But If I send attribute as this everything will work.
<me-direct device-path="some/common/url/to/view.html" tmp-url="{{appTemplateUrl}}"></me-direct>

Try this:::
angular.module('meDevices').directive('medirect',medirect);
function medirect(){
return{
restrict: 'E',
scope: {
base: '#baseUrl'
},
templateUrl: function(element, attrs) {
return "http://example.com/"+attrs['device-path']+attrs['tmp-url'];
}
}
}
Uses:
<me-direct device-path="{{contentUrl}}" tmp-url="{{appTemplateUrl}}"></me-direct>

how to pass multiple scope variables into custom directive in angularjs

I am trying to pass 2 scope variables from controller into a custom directive and having problem in accessing both of them.Model is same for the directive and controller.
Here is the code:
Html:
<myDirective data="var1" item="var2"></myDirective>
Controller:
$scope.var1="abc";
$scope.var2="xyz";
Directive:
app.directive('myDirective', function () {
return {
restrict: 'E', //E = element, A = attribute, C = class, M = comment
scope: {
var1: '='
var2:'='
},
templateUrl: 'myTemplate.html',
link: function ($scope, element, attrs) {
}
}
});
TemplateUrl: myTemplate.html
<div>{{var1}}</div> // This works
<div>{{var2}}</div> // This doesn't works
Any idea how can I use both?

Make these changes in your code
<popover data="var1" item="var2"></popover>
JS
app.directive('popover', function () {
return {
restrict: 'E', //E = element, A = attribute, C = class, M = comment
scope: {
data: '=',
item: '='
},
templateUrl: 'myTemplate.html',
link: function (scope, element, attrs) {
console.log(scope.data, scope.item);
}
}
});

Change your template to match the names declared in the DDO.
<myDirective var1="var1" var2="var2"></myDirective>
Avoid using data as an attribute name. That is a reserved prefix that is stripped during normalization. For more information on attribute normilization, see AngularJS Developer Guide - Directive Normilization.

AngularJS - trigger ngChange?

I have some custom directive and I've bound ng-model and ng-change directives info this.
Example:
<custom-directive ng-model="users" ng-change="changed()">
</custom-directive>
directive after execute contains some inputs, textareas etc. I want to execute function bound into ng-change, changed() always when something is changed in this inputs, textareas.
Can I execute ng-change from directive controller or link?
Like this for example:
.directive('customDirective', function () {
return {
restrict: 'E',
replace: true,
require: 'ngModel',
templateUrl: 'src/template.html',
link: function (scope, elem, attrs, ngModel) {
executeNgChange();
}
};
})

You should be able to bind the function in ng-change in your directive using angular's Scope Function Expression Binding:
.directive('customDirective', function () {
return {
restrict: 'E',
replace: true,
require: 'ngModel',
scope: {
change: '&ngChange'
}
templateUrl: 'src/template.html',
link: function (scope, elem, attrs, ngModel) {
scope.change(); // or use ng-change="change()" in your directive template
}
};
})
I haven't tested this myself but hopefully it helps you.

Angular pass dynamic scope to directive

I have a directive that takes an attribute value from a an http call like so:
Controller
app.controller("HomeController", function($scope){
$http.get("/api/source").then(function(res){
$scope.info = res.data
});
});
HTML
<div ng-controller="MainController">
<ng-mydirective data-info="{{info}}"></ng-mydirective>
</div>
Directive:
app.directive("ngMydirective", function(){
return {
restrict: "E",
templateUrl: "/partials/info.html",
link: function(scope, element, attrs){
scope.info = attrs.info;
}
}
});
I'm trying to pass that info variable from the controller, into the directive, through an attribute. It doesn't work because the variable value is initially created from an asynchronous http call, so at the time the directive is created, there is no value.
Is there a way to do this?

You can observe the attribute's value:
link: function(scope, element, attrs){
attrs.$observe('info', function(val) {
scope.info = val;
})
}
Also, if you can change the directive scope to be isolated, you can do it by binding the values:
app.directive("ngMydirective", function(){
return {
restrict: "E",
scope: {info: '='},
templateUrl: "/partials/info.html",
link: function(scope, element, attrs){
}
}
});
<div ng-controller="MainController">
<ng-mydirective info="info"></ng-mydirective>
</div>

How to apply a directive after a transclusion in AngularJS

I'm trying to access a transcluded element in an element directive from a different inner directive applied within the first directive's template.
My (trivial example) setup:
Element directive
.directive('elementDirective', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: 'template.html',
link: function (scope, elem, attr, ctrl, transclude) {
elem.find('transclusion').replaceWith(transclude());
}
};
})
Template
<div inner-directive>
<div id="transclusion"></div>
</div>
Inner Directive
.directive('innerDirective', function() {
return {
restrict: 'A',
link: function (scope, elem, attr, ctrl) {
//Do something here with child elements (which will be transcluded).
var some = elem[0].querySelector('[name]');
//...
}
};
})
Html
<element-directive>
<input name="input_name" />
</element-directive>
My Error:
I get an error of the kind.
element-directive element has no child input elements with a 'name' attribute
I'm assuming this means that the inner directive is compiled, linked, whatnot, before transclusion happens. So, how can I achieve what I'm trying to do?