Access dynamic $scope variable inside html

Question

I'm creating a large amount of directives and all will include dynamic scope variables that will be initialised inside the link functions e.g:

//
link: function(scope, ele, attr){
  scope.key = scope.somevar + 'something_else';
  scope[scope.key] = 'the_value';
}
//

I want to access the value in the templates of the directives viascope.key.

<div ng-if="scope[key]"> something </div>

Currently I only see it been viable through a function call like so:

html

<div ng-if="scope(key)"> something </div>

js

scope.scope = function(key) {
  return scope[key];
}

But then the problem is I will need to copy this into all the directives.

Another option I considered was to assign the getter function onto the $rootScope making it globally accessible but how do I bind it to or pass in the current directives scope. (If even possible).

What would be a good approach to this?

scope[key] doesn't work because you don't have a scope object on the scope. Try ng-if="keyContainer[key]" and having scope.keyContainer = {}; scope.keyContainer[scope.key] = *val* — Omri Aharon
– Omri Aharon, Commented Dec 22, 2015 at 13:32

dfsq · Accepted Answer · 2015-12-22 14:02:00Z

17

Inside of Angular template this keyword points to the current evaluation context, i.e. current scope. It means that you would be able to achieve what you are after by using bracket notation on the this object:

<div ng-if="this[key]"> something </div>

edited Dec 22, 2015 at 14:02

answered Dec 22, 2015 at 13:44

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kiee Over a year ago

I hang my head in shame for not trying this. Pardon the pun. Thank you!

Gonzalo Pincheira Arancibia Over a year ago

Using this it's very dangerous, because some directives creates a own scope. The better way it's use the 'controllerAs' syntax.

dfsq Over a year ago

@GonzaloPincheiraArancibia I would agree with you that controllerAs is generally better choice for many things. However, the point of the question was how to access dynamic scope property.

miken32 · Accepted Answer · 2025-05-29 14:29:37Z

2

Use bindToController option in your directive

JS

bindToController: true,
controller: 'MyController',
controllerAs: 'ctrl',
link: function(scope, ele, attr){
  scope.ctrl.key = scope.somevar + 'something_else';
  scope.ctrl[scope.ctrl.key] = 'the_value';
}

HTML

<div ng-if="ctrl[ctrl.key]"> something </div>

Check this codepen as example: https://codepen.io/gpincheiraa/pen/LGZrde

edited May 29 at 14:29

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Dec 22, 2015 at 13:50

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

2 Comments

Kiee Over a year ago

Thanks for the insight, I wasn't aware you could do this.

dfsq Over a year ago

ControllerAs is indeed would be good idea. However, not the way you use it in your example. You don't want to have controller alias in link function. bindToController is the way to go in this case.

mcgraphix · Accepted Answer · 2015-12-22 13:33:37Z

0

It would be easier to see all your code, but it sounds like you could just create a function on your scope to retrieve the value:

scope.getValue = function() {
    return scope[scope.key];
}

Then in your HTML:

<div ng-if="getValue()"> something </div>

answered Dec 22, 2015 at 13:33

mcgraphix

2,7331 gold badge14 silver badges15 bronze badges

2 Comments

Kiee Over a year ago

Thank you for the answer, however you have just duplicated what I've provided in the question just replacing the names.

mcgraphix Over a year ago

sorry.. that scope.scope was a little confusing.

Collectives™ on Stack Overflow

Access dynamic $scope variable inside html

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related