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?

Answer 1

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>

Answer 2

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>

Answer 3

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: http://goo.gl/SMq2Cx