AngularJS：不能从插补指令第一属性第二。 （W / plunker为例） [英] AngularJS: Cannot interpolate attribute from first directive to a second. (w/ plunker example)

问题描述

参考plunker： http://plnkr.co/edit/otv5mVVQ36iPi3Mp0FYw?p= preVIEW

Reference plunker: http://plnkr.co/edit/otv5mVVQ36iPi3Mp0FYw?p=preview

假设我们有两个指令，第一指令和第二指令。现在假设我们只能访问第一指令我们希望包装第二指令与和传递给它我们自己操纵的属性。

Suppose that we have two directives, first-directive and second-directive. Now suppose we only have access to first-directive which we hope to wrap second-directive with and pass to it our own manipulated attributes.

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}}'
    }
  }
});    

第一指令是被称为如下：

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

的console.log输出如下：

console.log output as follows:

template
compile
{{one}}
controller
cpre
cpost

所以从这个我已经学会了模板编译之前调用。这是从我的眼睛新手一个奇特的，因为没有反正操纵通过编译器，控制器，pre或链接后传回的模板函数值了！

So from this I've learned that template is called before compile. This is a peculiar from my novice eyes because there isn't anyway to manipulate the value passed back by the template function through compile, controller, pre, or post link!

问题是这样的：

我怎么能叫第二指令与我想要的动态属性值？请记住，第二指令是完全独立的，我们不能添加code那里。

How can I call the second-directive with the dynamic attribute value that I want? Keep in mind that second-directive is completely independent and we can't add code there.

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

PS - One possible idea I have is to call the second-directive as follows:

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

或备选

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? */
},

然而，再次，我不是一定要得到传递给之前的任何其他功能都称为第一指令的价值如何。控制器可以访问$范围，它被称为模板后。

Yet, again, I'm not sure how to get the value being passed to first-directive before any of the other functions are called. Controller has access to $scope and it is called AFTER template.

您的建议大大AP preciated。

Your suggestions greatly appreciated.

推荐答案

您不会（也不能）有模板内访问范围（因为在那一刻没有范围）。该模板被用来创建一个或多个元件，然后将它们连接到一个范围（具有它们的控制器实例化之后 - 如果有的话）。

You don't (can't) have access to scope inside the template (because there is no scope at that moment). The template is used to create one or more elements and then they are linked to a scope (after having their controllers instantiated - if any).

有很多方法来传递指令之间的值，每一个最适合特定目的。最简单的（但不一定是最好的，这取决于你的用例的详细信息）被分配在包装指令的范围值，并让内部指令读出范围：

There are a lot of ways to pass values between directives and each one is best suited for particular purposes. The simplest (but not necessarily best, depending on your usecase details) is assigning a value on a scope of the wrapper directive and let the inner directive read it off the scope:

<!-- 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}} !'
  };
}

这篇关于AngularJS：不能从插补指令第一属性第二。 （W / plunker为例）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！