Angularjs 角度指令转换与继承_Angularjs_Angularjs Directive_Transclusion

Angularjs 角度指令转换与继承

angularjs

Angularjs 角度指令转换与继承,angularjs,angularjs-directive,transclusion,Angularjs,Angularjs Directive,Transclusion,我有三条指令：艾奥特、艾米德尔和艾内尔 app.directive('aiOutter', function() { return { restrict: 'A', scope: { data: '=' }, template: '<div>Outter: {{data}}</div>', transclude: true, link: function(scope, elem, attrs) {

我有三条指令：

艾奥特、艾米德尔和艾内尔

app.directive('aiOutter', function() {
  return {
    restrict: 'A',
    scope: {
      data: '='
    },
    template: '<div>Outter: {{data}}</div>',
    transclude: true,
    link: function(scope, elem, attrs) {
      console.log('outter recognized');
      return console.log('outter data:', scope.data);
    }
  };
}).directive('aiMiddle', function() {
  return {
    restrict: 'A',
    scope: {
      data: '='
    },
    template: '<div>Middle: {{data}}</div>',
    transclude: true,
    link: function(scope, elem, attrs) {
      console.log('middle recognized');
      return console.log('middle data:', scope.data);
    }
  };
}).directive('aiInner', function() {
  return {
    restrict: 'A',
    scope: {
      data: '='
    },
    template: '<div>Inner: {{data}}</div>',
    link: function(scope, elem, attrs) {
      console.log('inner recognized');
      console.log('inner data:', scope.data);
      scope.changeData = function(newData) {
        scope.data = newData;
      }
    }
  };
});

app.directive（'aiOutter'，function（）{
返回{
限制：“A”，
范围：{
数据：'='
},
模板：“Outter:{{data}}”，
是的，
链接：功能（范围、要素、属性）{
console.log（'outter recognized'）；
返回console.log（'outter data:'，scope.data）；
}
};
}).directive（'aiMiddle'，function（）{
返回{
限制：“A”，
范围：{
数据：'='
},
模板：“中间：{{data}}”，
是的，
链接：功能（范围、要素、属性）{
console.log（'middle recognized'）；
返回console.log（'中间数据：'，scope.data）；
}
};
}).directive（'aiInner'，function（）{
返回{
限制：“A”，
范围：{
数据：'='
},
模板：“内部：{{data}}”，
链接：功能（范围、要素、属性）{
console.log（“内部识别”）；
console.log（'内部数据：'，scope.data）；
scope.changeData=函数（newData）{
scope.data=新数据；
}
}
};
});

我的标记如下所示：

<body ng-controller="MainCtrl">
    <div ai-outter data="name">
      <div ai-middle data="data">
        <div ai-inner data="data">
        </div>
     </div>
   </div>

似乎只有最外面的指令被采纳了。我需要做什么才能使用这个继承模式，以及能够用转置标记填充最内部的指令

普朗克：

编辑澄清

我按照PascalPrecht的建议编辑了我的标记a（更新的plunker在这里：）


你好，{{name}}
点击我

然而，我认为我遇到了一个范围问题。当我按下按钮时，{{name}}模型应该一直绑定到后面，不是吗？目前，只更新最内部的作用域

我想我对指令的作用域感到困惑。

您需要在指令模板中指定

ng transclude

，告诉angular将转置内容放在何处。然后，您可以通过提供一个获取转置内容的模板来进行一些链接，其中转置内容再次包含一个获取双向绑定数据的指令

我相应地更新了您的plunk:

您需要在指令模板中指定

ng transclude

我相应地更新了您的plunk:

您不能使用原语值，您应该引用范围控制器中的对象

查看代码的修改版本：

一定要看看这个极好的答案：

您不能使用原语值，应该引用范围控制器中的对象

查看代码的修改版本：

一定要看看这个极好的答案：

我更新了原始问题以反映更具体的问题。我更新了原始问题以反映更具体的问题。当您指定范围：{}时，您指定的是独立范围。没有作用域继承。对于作用域继承，请使用scope:true。指定作用域：{}时，您指定的是独立作用域。没有作用域继承。对于范围继承，请使用scope:true。

<body ng-controller="MainCtrl">
    <div ai-outter data="name" ng-transclude>
      <div ai-middle data="name" ng-transclude>
        <div ai-inner data="name" ng-transclude>
         <h1> Hello, {{name}}</h1>
         <button ng-click="name = 'bob'">Click me</button>
        </div>
      </div>
    </div>