Question

在angular.js中，

指令可以使用在其父范围内定义的所有变量，如下所示：

.directive('directiveName', ()->
    scope: true

类似地，指令可以简单地忽略其父节点范围，并将其定义为如此

.directive('directiveName', ()->
    scope: false

此外，指令可以选择＆＃34;隔离＆＃34;它希望从其父范围使用的特定变量如下：

.directive('directiveName', ()->
    scope: 
      parentScopeVar1: '='
      localVarAliasOfParentVar2: '=parentVar2'

这里的问题是这些孤立的变量必须在指令的html语法中声明，如下所示：

<directiveName parent-scope-var-1="parentScopeVar1" parent-var-2="parentVar2" />

问题： 我注意到如果我使用isolate方法..我不能再在html中使用我的指令定义变量，例如假设我有

.directive('directiveName', ()->
    scope: 
      parentScopeVar1: '='
    ..

    link: (scope, elem, attrs) ->
      scope.directiveDefinedVar = true

并在html中：

<directiveName ng-class="{active:directiveDefinedVar}" />  <!-- This doesn't work! it used to work when I had scope: false -->

知道为什么会这样吗？

我可以解决这个问题的唯一方法是将parentScopeVar1的值保存到服务中......然后在我的指令体中设置一个观察者，如下所示：

.directive('directiveName', 'parentScopeVar1Cache',(parentScopeVar1Cache)->
  ..
  link: (scope, elem, attrs) ->
    scope.parentScopeVar1Cache = parentScopeVar1Cache
    scope.$watch 'parentScopeVar1Cache', (newValue)->
      # do stuff with newValue

但是我发现这个解决方案太脏了...我想简单地从我的前三个例子中的范围定义来做..

Answer 1

应用于元素的属性（通过ng-class）来自外部范围。您在链接中定义的范围属性是内部属性，并应用于指令的模板。因此，外部范围显然无法查看内部和隔离范围的属性。

而不是这样做，为你的指令创建一个模板并在那里应用ng-class。

template: '<div ng-class="{active:directiveDefinedVar}">...</div>'

Answer 2

如果我使用：

.directive('directiveName', [function () {
    return {
        restrict: 'EA',
        scope: {
            parentScopeVar: '='
        },
        template: '<div data-ng-class="{focused: hasFocus}">blabla</div>',
        controller: function($scope, $element, $attrs){
             $scope.hasFocus = false;

              $scope.onFocus = function () {
                 $scope.hasFocus = true;
              }
        .....
        }

它对我有用

如何在指令中混合和匹配局部变量和导入的变量

2 个答案: