Develop Reference

Angular directive scope is empty

I have a Directive:
var ActorDisplayDirective = function() {
return {
replace : false,
restrict : 'AE',
scope : {
actor : "="
},
templateUrl: staticContext + '/angular-app/templates/actor-display-template.html',
link : function(scope, elem, attrs) {
},
}
};
This works fine in some places, but not others. Here is my code to show it where it is not working:
<p>CAP: {{can_approve_for}}</p>
<p>
Actor display template:
<span actor-display actor='can_approve_for'></span>
After template
</p>
The CAP: ... displays the data, the directive's actor value is null. Why? My controller does:
dataFactory.getCanApproveFor().then(function(data) {
$scope.can_approve_for = data;
});
So, I am able to see the value on the page, but the directive does not show it. I'm assuming it's a timing/refresh thing, but this directive works elsewhere in ng-repeat, because the ng-repeat evaluates after hte object is already set, I guess. How do I do it in this case?

You are not actually declaring ActorDisplayDirective as a directive. Its just a plain function that returns an object that sort of looks like a directive.
You have to tell angular that it is a directive like so:
angular.module('someModule', [])
.directive('actorDisplay', function () {
return {
replace: false,
restrict: 'AE',
scope: {
actor: "="
},
templateUrl: staticContext + '/angular-app/templates/actor-display-template.html',
link: function (scope, elem, attrs) {
},
}
})

How to display template when scope change [Angular directive]

Here is my directive:
function ajaxMessageData()
{
var ajaxMessage = {
link: link,
restrict: "EA",
template: "success",
scope: {
success: '='
}
};
return ajaxMessage;
function link(scope, elm, attrs)
{
console.log(scope.success);
scope.$watch(attrs.success, function (newValue) {
console.log("Changed to " + newValue);
});
}
}
and in html:
<ajax-message success="vm.message"></ajax-message>
Problem is with scope inside directive I get initial message from vm.message (it is my controller var) but when my vm.message change it not detectd in directive... Also I would like to template show only if I get success message from vm.success. Anyone know how to accomplish this?
Thanks

You're passing the wrong argument to the $watch. It should be an expression -- not the value of the attrs object.
You can use the ng-if directive to control visibility.
Not sure if this is intended, but the success template maybe needs a curly binding: "{{ success }}"
Example:
myApp.directive('ajaxMessage', function() {
return {
restrict: 'EA',
scope: {
success: '='
},
// Use anything you like in the template -- note the ng-if will only
// render the element when the success property has a value
// Also note the {{ binding }}
template: "<div ng-if=\"success\" class=\"alert alert-info\">{{ success }}</div>",
link: function($scope, $element, $attrs) {
// Watching $scope.success (not the $attrs.success)
$scope.$watch('success', function(value) {
console.log('Success is now:', value);
});
}
};
});
... or see this plunker in action.

Use promise in directive for dynamic templateUrl

I have a promise SharedData which return a variable service .template as well. The value is mytemplate with which I build an url that I ant to pass to templateUrl directive but without success.
app.directive('getLayout', function(SharedData) {
var buildUrl= '';
SharedData.then(function(service) {
buildUrl = service.template + '/layouts/home.html';
console.log(buildUrl); // return mytemplate/layouts/home.html which is the URL I want to use as templateUrl
});
return {
restrict: 'A',
link: function(scope, element, attrs) {...},
templateUrl: buildUrl
}
});
Thanks for helping me!

I resolve my issue using $templateRequest
app.directive('getLayout', function($templateRequest, SharedData) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
SharedData.then(function(service) {
myTemplate = $templateRequest(service.template + '/layouts/home.html');
Promise.resolve(myTemplate).then(function(value) {
element.html(value);
}, function(value) {
// not called
});
});
}
};
});
Here is a Plunker
Hope this will help some people :) and thanks to #Matthew Green

The docs seem to say that the templateUrl can be set asynchronously. However, I have not been able to show that applies to promises. So one way you can do this then while still using a promise would be to add the template to your element in the link function instead.
That would look something like this.
app.directive('getLayout', function($templateCache, SharedData) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
SharedData.then(function(templateName) {
element.html($templateCache.get(templateName));
});
}
}
});
Here is a plunkr to show a full working example. It assumes that the template is loaded into $templateCache so if it isn't you can do a $http.get() for the same effect.

Alternative approach for eliminating $watch

As mentioned in the title in my angular application due to the below approach it leads to creation of many watch, i want to find some alternative methods for this.
<div ng-app="myapp">
<first></first>
</div>
var myApp = angular.module('myapp', []);
myApp.directive('first', [
function() {
return {
restrict: 'AE',
replace: true,
transclude: true,
template: '<div id="first"><second id="second" param="paramData"></second></div>',
scope: {
},
controller: [
'$scope',
'$element',
'$attrs',
function($scope, $element, $attrs) {
}
],
link: function(scope, element, attrs, ctrl,$timeout) {
scope.paramData = "Test";
scope.updateParamData = function(){
scope.paramData = "TimeOut";
};
//$timeout(scope.updateParamData,5000);
}
};
}
]);
myApp.directive('second', [
function() {
return {
restrict: 'AE',
replace: true,
template: '<div></div>',
scope: {
param: '=param'
},
controller: [
'$scope',
'$element',
'$attrs',
function($scope, $element, $attrs) {
console.log("inside controller",$scope.param);
}
],
link: function(scope, element, attrs) {
console.log("inside link",scope.param);
scope.$watch(scope.param,function(){
console.log("inside watch",scope.param);
element.innerHTML = scope.param;
});
}
};
}
]);
In the above example the param which is passed from first directive to the second directive is controlled by first directive so the para can change at any time so in the second directive i am using the watch to update the second directive HTML based on the param update.
So now the problem is if i used same kind of approach in my application at many places it leads to multiple watch, so i want to check is this approach is correct or is there is any other alternative approach for this.?

There must be a $watch somewhere to detect the change in the value.
One way to reduce the number of watches is not to use two-way binding scope: {param: "="} in the second directive, and instead use one-way binding of "&".
.directive("second", function(){
return {
scope: { param: "&" }, // this does not create a watch on the parent
template: "<div>{{param()}}</div>" // {{ }} creates a watch
}
})
Of course, you can also explicitly add a $watch in the link/controller (although in your particular example where you use element.innerHTML) it can easier be done with the template approach above):
link: function(scope, element){
scope.$watch(function(){ return scope.param(); },
function(newValue, oldValue){
console.log(newValue, oldValue);
});
}
So, the number of watches is 1 in each case.

I see no way to improve this. Since you need to actually listen for changes for param I do not see a way different from watchers in this case.

Angular Directive refresh on parameter change

I have an angular directive which is initialized like so:
<conversation style="height:300px" type="convo" type-id="{{some_prop}}"></conversation>
I'd like it to be smart enough to refresh the directive when $scope.some_prop changes, as that implies it should show completely different content.
I have tested it as it is and nothing happens, the linking function doesn't even get called when $scope.some_prop changes. Is there a way to make this happen ?

Link function only gets called once, so it would not directly do what you are expecting. You need to use angular $watch to watch a model variable.
This watch needs to be setup in the link function.
If you use isolated scope for directive then the scope would be
scope :{typeId:'#' }
In your link function then you add a watch like
link: function(scope, element, attrs) {
scope.$watch("typeId",function(newValue,oldValue) {
//This gets called when data changes.
});
}
If you are not using isolated scope use watch on some_prop

What you're trying to do is to monitor the property of attribute in directive. You can watch the property of attribute changes using $observe() as follows:
angular.module('myApp').directive('conversation', function() {
return {
restrict: 'E',
replace: true,
compile: function(tElement, attr) {
attr.$observe('typeId', function(data) {
console.log("Updated data ", data);
}, true);
}
};
});
Keep in mind that I used the 'compile' function in the directive here because you haven't mentioned if you have any models and whether this is performance sensitive.
If you have models, you need to change the 'compile' function to 'link' or use 'controller' and to monitor the property of a model changes, you should use $watch(), and take of the angular {{}} brackets from the property, example:
<conversation style="height:300px" type="convo" type-id="some_prop"></conversation>
And in the directive:
angular.module('myApp').directive('conversation', function() {
return {
scope: {
typeId: '=',
},
link: function(scope, elm, attr) {
scope.$watch('typeId', function(newValue, oldValue) {
if (newValue !== oldValue) {
// You actions here
console.log("I got the new value! ", newValue);
}
}, true);
}
};
});

I hope this will help reloading/refreshing directive on value from parent scope
<html>
<head>
<!-- version 1.4.5 -->
<script src="angular.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<my-test reload-on="update"></my-test><br>
<button ng-click="update = update+1;">update {{update}}</button>
</body>
<script>
var app = angular.module('app', [])
app.controller('Ctrl', function($scope) {
$scope.update = 0;
});
app.directive('myTest', function() {
return {
restrict: 'AE',
scope: {
reloadOn: '='
},
controller: function($scope) {
$scope.$watch('reloadOn', function(newVal, oldVal) {
// all directive code here
console.log("Reloaded successfully......" + $scope.reloadOn);
});
},
template: '<span> {{reloadOn}} </span>'
}
});
</script>
</html>

angular.module('app').directive('conversation', function() {
return {
restrict: 'E',
link: function ($scope, $elm, $attr) {
$scope.$watch("some_prop", function (newValue, oldValue) {
var typeId = $attr.type-id;
// Your logic.
});
}
};
}

If You're under AngularJS 1.5.3 or newer, You should consider to move to components instead of directives.
Those works very similar to directives but with some very useful additional feautures, such as $onChanges(changesObj), one of the lifecycle hook, that will be called whenever one-way bindings are updated.
app.component('conversation ', {
bindings: {
type: '#',
typeId: '='
},
controller: function() {
this.$onChanges = function(changes) {
// check if your specific property has changed
// that because $onChanges is fired whenever each property is changed from you parent ctrl
if(!!changes.typeId){
refreshYourComponent();
}
};
},
templateUrl: 'conversation .html'
});
Here's the docs for deepen into components.