Question

我创建了大量的指令，所有指令都将包含将在链接函数内初始化的动态范围变量的 e.g：

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

我想通过scope.key访问指令模板中的值。

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

目前我只是通过函数调用看到它是可行的：

HTML

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

JS

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

但问题是我需要将其复制到所有指令中。

我考虑的另一个选项是将getter函数分配到$rootScope，使其可全局访问，但如何将其绑定到或传入当前指令范围。（如果可能的话）。

对此有什么好处？

Answer 1

Angular模板this内部关键字指向当前评估上下文，即当前范围。这意味着您可以通过在this对象上使用括号表示法来实现您的目标：

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

Answer 2

在指令

中使用bindToController选项

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>

检查此codepen作为示例：http://goo.gl/SMq2Cx

Answer 3

查看所有代码会更容易，但听起来您可以在示波器上创建一个函数来检索值：

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

然后在你的HTML中：

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

在html

3 个答案: