Marcin86 Marcin86 - 3 years ago 281
Javascript Question

Custom directive scope vs attrs

I have one concern when creating a custom directive in angular.
When I'm using a link function, I'm not sure what is the real difference when accessing attributes with attrs or scope.
Take this piece of code for example:

myApp.directive('someDirective', function() {
return {
restrict: 'E',
replace: true,
scope: {
title: '=title'
template: '<img/>',
link: function(scope, element, attrs) {
if (scope.title) {
// do something here
if (attrs.title){
// do something here

From my observations accessing 'title' attribute from attrs and by scope has a similar effect. What is the real difference?

Answer Source

The difference is that attribute is of a String type by definition. Always. In your case attrs.title will be literally string equal to whatever you pass into attribute in HTML.

However, scope.title is parsed and evaluated result of the attribute attr.title.

Ex. If you use something like this in HTML

<some-directive title="name"></some-directive>

where $ = "Thomas Mann" defined in the scope, then attr.title will be string "name", while scope.title will be "Thomas Mann".

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download