Question

在创建具有隔离范围的指令时，我无法访问指令元素的范围属性（在角度1.0.7中不是这种情况，但在更高版本中（例如1.2.17））。

angular.module("app", []).directive("red", function() {
  return {
    scope: {},
    link: function(scope) {
      scope.isRed = true;
    }
  };
});

.red {
  color: #ff0000;
}

<div red ng-class="{red: isRed}">This is red in angular 1.0.7</div>

<div red ng-class="{red: isRed}">This is NOT red in angular 1.2.17</div>

See demo.

那么，有没有办法访问指令元素本身的范围属性，而不仅仅是角度1.0.7 +中的父元素？

我知道我可以使用一些解决方法，但是什么是＆＃34; clear＆＃34;解决这个问题？

Answer 1

因为您试图隔离范围，请尝试：

angular.module("app", []).directive("foo", function() {
  return {
    scope: {},
    transclude: true,
    template: "<div ng-class='{red: isRed}'><ng-transclude/></div>",
    link: function(scope,element) {
      scope.isRed = true;

    }
  };
});

您的代码正在尝试使用父母的范围＆＃34; isRed＆＃34;，而您的指令实际上是设置子范围＆＃34; isRed＆＃34;

作为上述

的替代方案

初始化一个对象：

<div ng-init="color={red:true}"></div>

像这样使用指令：

<div foo ng-class="color">Hello world</div>

参见ngClass＆＃34; =＆＃34;：

angular.module("app", []).directive("foo", function() {
  return {
    scope: {
      ngClass: "="
    },
    link: function(scope,element) {
      scope.ngClass.red = true;
    }
  };
});

Answer 2

如果用函数替换scope.isRed而不是仅设置true值，它就有效。

scope.isRed = function() {
 return true;
}

我不确定为什么它从早期版本的Angular中发生了变化，但使用函数而不是直接赋值是有意义的。

隔离范围 - 访问元素上的范围属性

2 个答案:

作为上述