Question

我有一个奇怪的角度范围混合的情况。这是plnkr：http://plnkr.co/edit/o8cyZXkHX8Lt9Vkbn0xm

已转换的范围无法解析appCtrl.testString，这很奇怪，因为已转换的内容应具有外部范围。更奇怪的是，num得到了正确的解决。

此外，data-test-attr会在ng-controller定义的元素上获得正确的值。

这是一个最小的工作示例，因此重新排序元素或在不同位置定义范围的解决方案并不适合我。如果可能的话，我会以某种方式破解repeatedDirective。

以下是代码：

index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <repeated-directive ng-repeat="num in [1, 2, 3, 4, 5]" ng-controller="AppController as appCtrl" data-test-attr="{{appCtrl.testString}}">
      <div>{{num}} - {{appCtrl.testString}}</div>
    </repeated-directive>
  </body>

</html>

script.js

angular.module('app', [])
  .controller('AppController', AppController)
  .directive('repeatedDirective', repeatedDirective);

function AppController($scope) {
  this.testString = 'Controller value';
}

function repeatedDirective() {
  return {
    transclude: true,
    template: '<div ng-transclude></div>'
  };
}

Answer 1

您的控制器不在您的指令范围内：

这可以修复它，而无需更改html中的任何内容：

angular.module('app', [])
  .controller('AppController', AppController)
  .directive('repeatedDirective', repeatedDirective);

function AppController($scope) {
  this.testString = 'Controller value';
}

function repeatedDirective() {
  return {
    transclude: true,
    template: '<div></div>',
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(scope, function(clone, scope) {
        element.append(clone);
      });
    }
  };
}

http://plnkr.co/edit/LsRfyw98f4BP4G72Bgd6?p=preview

这样，您的转换不会使用单独的范围，而是占用控制器的范围。

瞧瞧

有关究竟发生了什么的更多信息，我将包括一个参考博客：

http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

Answer 2

在ng-repeat范围内，您的[1, 2, 3, 4, 5]范围而不是appCtrl，它解释了testString的空值（实际上它是不存在的）。您应该访问$parent以获得appCtrl范围。

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <repeated-directive ng-repeat="num in [1, 2, 3, 4, 5]" ng-controller="AppController as appCtrl" data-test-attr="{{appCtrl.testString}}">
      <div>{{num}} - {{$parent.appCtrl.testString}}</div>
    </repeated-directive>
  </body>

</html>

http://plnkr.co/edit/qc3j0nsJZKypXSsqMEqx

AngularJS范围

2 个答案: