在html中访问动态$ scope变量

Question

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

//
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 via scope.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, ie 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

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

Answer 3

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>