AngularJS:无法将属性从第一个指令插入到第二个指令。（w/plunker示例） 参考文献

参考普朗克：

对问题的解释 假设我们有两个指令，

第一个指令

和

第二个指令

。现在假设我们只能访问

第一个指令

，我们希望用

第二个指令

包装它，并将我们自己的操作属性传递给它

app.directive('firstDirective', function() {
  return {
    scope: true,
    priority: 1000,
    transclude: true,

    template: function(element,attributes){
      console.log('template')
      return '<second-directive two="{{one}}"></second-directive>'
    },

    compile: function(element,attributes) {
      console.log('compile')
      return {
        pre: function(scope){
          scope.one = 'foo'
            console.log('cpre')
        },
        post: function(scope){
          scope.one = 'foo'
            console.log('cpost')
        },
      }
    },

    controller: ['$scope','$attrs',function($scope,$attrs){
      console.log('controller');
      $scope.one = 'foo';
    }],
  }
})

app.directive('secondDirective',function(){
  return {
    template: function (element,attributes){
      console.log(attributes.two) //{{one}} not 'foo' or 'test'
      return 'Hello {{two}}'
    }
  }
});    

console.log输出如下：

<first-directive one='test'></first-directive>

template
compile
{{one}}
controller
cpre
cpost

template: function(element,attributes){
  console.log('template')
  var explicit = ???? /* how to access scope? */
  return '<second-directive two="'+ explicit +'"></second-directive>'
},

因此，我从中了解到，模板是在编译之前调用的。这在我的新手眼里是一个奇怪的现象，因为无论如何都无法通过compile、controller、pre或post链接操纵模板函数传回的值

问题是：

如何使用所需的动态属性值调用

第二个指令

？请记住，

second指令

是完全独立的，我们不能在那里添加代码

PS- 我的一个可能想法是调用第二个指令，如下所示：

<first-directive one='test'></first-directive>

template
compile
{{one}}
controller
cpre
cpost

template: function(element,attributes){
  console.log('template')
  var explicit = ???? /* how to access scope? */
  return '<second-directive two="'+ explicit +'"></second-directive>'
},

模板：函数（元素、属性）{
console.log（'template'）
var explicit=？？？/*如何访问范围*/
返回“”
},

或者

template: function(element,attributes){
  console.log('template')
  return $interpolate('<second-directive two="{{one}}"></second-directive>')(scopeObj) /* how does one access scopeObj with current scope values here? */
},

模板：函数（元素、属性）{
console.log（'template'）
返回$interpolate（“”）（scopeObj）/*如何使用当前范围值访问scopeObj*/
},

然而，同样，我不知道如何在调用任何其他函数之前获得传递给第一个指令的值。控制器可以访问$scope，并在模板之后调用它

---

非常感谢您的建议。

第二条指令是您写的吗

要使上述代码正常工作，您需要在第二个指令中设置隔离作用域对象，请查看下面的plunkr

---

我用你的问题来学习，但我发现这可能对你有用：

app.directive("tryThis", function($compile){
    return{
        scope: {
          one: '@',
        },
        link: function(scope, element){
            var template = '<second-directive two="'+scope.one+'"></second-directive>';
            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
        }
    }
});

app.directive（“tryThis”，函数（$compile）{
返回{
范围：{
一:“@”，
},
链接：功能（范围、元素）{
var模板=“”；
var linkFn=$compile（模板）；
var内容=linkFn（范围）；
元素。追加（内容）；
}
}
});

请注意，

test

现在记录在控制台中，而不是

{{one}

。如果secondDirective被赋予一个独立的作用域，

test

随后将显示在屏幕上

---

这也帮助我从概念上理解了您所面临的问题，为“编译期间没有作用域”这一步提供了一些上下文——我不确定是否有办法解决这一问题

如果您只想将数据从第一个指令传递到第二个指令模板，那么您可以使用
this.fromFirstDir=“您可以从这里通过”

第一指令控制器：

controller: ['$scope','$attrs',function($scope,$attrs){
      console.log('controller');
      $scope.one = 'foo';

      this.fromFirstDir = "you can pass from here"
    }],
  }

然后，对于第一个指令控制器，使用secondDirective中的require属性，您可以使用传递给link函数的控制器从secondDirective指令的link函数访问此动态属性。最后，将这些属性分配给传递给链接函数的本地范围

app.directive('secondDirective',function(){
  return { 
    scope: {twoData : '@twoData'},
    require : '^firstDirective',
    template: function (element,attributes){
      console.log(attributes.two) //{{one}} not 'foo' or 'test'
      return 'Hello <b>{{fromFirstDir}}</b>'
    },
    link : function(scope,element,attr,firstDirCtrl){
      console.log("===",firstDirCtrl.fromFirstDir) 
      scope.fromFirstDir = firstDirCtrl.fromFirstDir;
    }
  }
});

app.directive（'secondDirective'，function（）{
返回{
作用域：{twoData:'@twoData'}，
要求：“^firstDirective”，
模板：函数（元素、属性）{
console.log（attributes.two）/{{one}}不是'foo'或'test'
返回“Hello{{fromFirstDir}}”
},
链接：函数（范围、元素、属性、firstDirCtrl）{
console.log（“==”，firstDirCtrl.fromFirstDir）
scope.fromFirstDir=firstDirCtrl.fromFirstDir；
}
}
});

这样，这些动态心房就可用于您的第二个指令

这是决赛

希望这将对您有所帮助。

您没有（不能）访问模板内的作用域（因为此时没有作用域）。模板用于创建一个或多个元素，然后将它们链接到一个作用域（在实例化其控制器（如果有）之后）

有很多方法可以在指令之间传递值，每种方法都最适合于特定的用途。最简单的（但不一定是最好的，取决于您的用例细节）是在wrapper指令的作用域上分配一个值，并让internal指令从作用域中读取它：

<!-- HTML -->
<one for-two="{{test}}"></one>

// JS
angular.
  module('myApp', []).
  directive('one', oneDirective).
  directive('two', twoDirective);

function oneDirective() {
  return {
    restrict: 'E',
    scope: true,
    link: function onePostLink(scope, elem, attrs) {
      scope.two = attrs.forTwo;
    },
    template: '<two></two>'
  };
}

function twoDirective() {
  return {
    restrict: 'E',
    template: 'Hello, {{two}} !'
  };
}

//JS
有棱角的
模块（'myApp'，[]）。
指令（'one'，oneDirective）。
指令（“两个”，两个指令）；
函数oneDirective（）{
返回{
限制：'E'，
范围：正确，
链接：函数onePostLink（范围、元素、属性）{
scope.two=attrs.forTwo；
},
模板：“”
};
}
函数twoDirective（）{
返回{
限制：'E'，
模板：“你好，{{two}！”
};
}

您有

transclude:true

，但未在模板中使用它。您不能只使用此标记并使用第一个指令的模板吗？您有

scope:true

，因此您可以从父级/控制器操作属性，并且更改将传播到这两个指令

加价

<first-directive one="test">
    <second-directive two="test"></second-directive>        
</first-directive>

第一个指令的模板

template: `<div>
               my first directive content
               <ng-transclude></ng-transclude>
           </div>`;

模板：`
我的第一个指令内容
`;

---

问题是第二个指令不能更改。我找到了一种方法，我正在更新我的问题来展示它，它提出了另一个问题，也许你会对此有所了解。那么，在我看来，第二个指令没有隔离作用域，只是使用了作用域继承。在这种情况下，您将需要以下内容：