Access dynamic $scope variable inside html

问题:

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?

回答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>

回答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

回答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>