Question

因此，在角度文档网站上，您可以定义Tobias和Jeff

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
.directive('myDialog', function() {
  return {
   restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function (scope, element) {
      scope.name = 'Jeff';
    }
  };
});

如果你这样做，名字是{{name}}，它会说

The name is Tobias

我试图在链接功能中访问Tobias。从链接函数内部，我如何获得$ scope.name值等于Tobias？

Answer 1

由于范围是隔离的scope: {},指令，因此会创建一个新的子范围。在这种情况下，直接访问父范围属性的唯一方法是使用范围$parent，引用父范围对象。例如：

link: function(scope, element) {
    scope.name = 'Jeff';
    scope.parentName = scope.$parent.name; // Tobias
}

然而，这并不理想。这就是为什么你可能想要考虑更灵活的方法：

<my-dialog name="name"></my-dialog>

并将范围配置定义为：

scope: {
    parentName: '=name'
}

Answer 2

您必须使用范围的$ parent属性：

scope.$parent.name = 'Jeff';

Answer 3

如果您使用transclude:true，如果您没有任何局部变量，则可以省略scope:{}。放scope:{}没有意义。

所以声明就像是

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
.directive('myDialog', function() {
  return {
   restrict: 'E',
    transclude: true,
    templateUrl: 'my-dialog.html',
    link: function (scope, element) {
      // scope.name = 'Jeff';
      // if name is in your parent scope, you should be able to get it here
      console.log(scope.name);
    }
  };
});

如果查看模板，您将看到ng-transclude指令已被使用，这意味着在模板中将使用父作用域的变量。希望它有意义。

Answer 4

你可以通过$ parent这样得到它：

link: function (scope, element) {
  scope.name = 'Jeff';
  console.log(scope.name);
  console.log(scope.$parent.name);
}

Answer 5

我只是想知道你为什么要这样的东西。

这样你就可以在控制器和不应该存在的指令之间创建一个依赖性。

如果您需要指令的输入数据，请明确声明。

如何在指令链接中访问父作用域

5 个答案: