Question

我写了这段代码。

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.hobby='AngularJS';
});

app.directive('outputText',function(){
  return {
    transclude: true,
    scope: {},
    template: '<div ng-transclude></div>'
  }
});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <div output-text>
     <p>Hello {{name}}</p>
   </div>
   <div output-text>
     <p>I love {{hobby}}!!</p>
   </div>
  </body>

</html>

＆＃13;

正如您在上面所看到的，我在我的指令中使用了隔离范围，其中隔离范围中没有name属性。但它是如何访问父作用域名称属性的，因为我甚至没有使用子作用域，或者我遗漏了一些东西。

Answer 1

无论您是否使用隔离，都会将被转换的元素绑定到父作用域。

这就是documentation on transclude状态

转换

编译元素的内容并使其可用   指令。通常与ngTransclude一起使用。的优点   转换是链接功能接收转换   预先绑定到正确范围的函数。在典型的设置中   窗口小部件创建隔离范围，但转换不是   孩子，但孤立范围的兄弟姐妹。这使得它成为可能   具有私有状态的小部件，以及要绑定的转换   父（隔离前）范围。

Answer 2

每个指令都被编译并链接到范围。已转换的内容始终链接到指令的直接外部范围（尽管通过使用transclude函数 - 您的链接函数的第5个arg可以覆盖它）。在您的情况下，它是MainCtrl控制器的范围。

如果你的指令在ng-repeat（或另一个创建子范围的指令）中，那么被转换的内容将与ng-repeat的子范围相关联。

transclude如何与隔离范围一起使用

2 个答案: