AngularJS:无法将属性从第一个指令插入到第二个指令.(带 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

假设我们有两个指令，first-directive 和 second-directive.现在假设我们只能访问 first-directive，我们希望用它包装 second-directive 并将我们自己的操作属性传递给它.

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 被调用如下:

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

console.log 输出如下:

console.log output as follows:

template
compile
{{one}}
controller
cpre
cpost

所以从这里我了解到模板在编译之前被调用.这在我的新手眼中很奇怪，因为无论如何都无法通过 compile、controller、pre 或 post 链接来操作模板函数传回的值！

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!

问题是这样的:

如何使用所需的动态属性值调用 second-directive?请记住，second-directive 是完全独立的，我们不能在那里添加代码.

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

然而，再次，我不确定如何在调用任何其他函数之前获取传递给 first-directive 的值.控制器可以访问 $scope，它被称为 AFTER 模板.

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.

非常感谢您的建议.

推荐答案

好吧，如果您只想将数据从第一个指令传递到第二个指令模板，那么您可以使用
在第一个指令控制器中添加 dynamics 属性this.fromFirstDir = "你可以从这里过去"

Well if you just want to pass the data from first directive to second directive template, then you can add the dynamics attribute in first directive controller using
this.fromFirstDir = "you can pass from here"

第一个指令控制器:

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

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

然后使用 secondDirective 中的 require 属性作为第一个指令控制器，您可以从 secondDirective 指令的链接函数访问此动态属性使用传递给链接函数的控制器.最后将这些属性分配给传递给链接函数的局部作用域.

Then using the require attribute in the secondDirective for first directive controller,you can access this dynamic attribute from link function of the secondDirective directive using controller passed to link function. Finally assign those attributes to local scope passed to link function.

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

通过这种方式，这些动态属性可用于您的第二个指令.

In this way, those dynamic atributes are available to your second directive.

这是最终的小提琴.

希望对您有所帮助.

这篇关于AngularJS:无法将属性从第一个指令插入到第二个指令.(带 plunker 示例)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！