Question

请参阅codepen。

当我将指令作为一个独立的范围，将“scope：false”替换为“scope：{}”时，我需要做什么才能使scope.test在我的HTML中可见？

我的指示：

angular
  .module("MyApp", [])
  .directive("myDir", () => {
    return {
      scope: false,
      restrict: "A",
      link: (scope, element) => {
          scope.test = 'my test';
      }
    };
  });

我的HTML：

<div ng-app="MyApp">
  <div my-dir>{{test}}</div>
</div>

没有控制器，我的指令中只有链接功能。

Answer 1

之前它有用，因为你有scope: false（共享范围）。

在您的情况下，在指令中添加scope: {}并不会在屏幕上反映test值更改。因为在指令中创建scope: {}隔离范围时，它会将scope绑定到指令template（如果存在）。在您的情况下，您的指令中没有template。

如果您想查看输入值，可以通过

进行更改

使用$parent惯例，例如范围。$ parent.test =＆＃39; my test＆＃39;
或者移动{{test}}内部指令模板，以便使用指令模板编译隔离的作用域。

Answer 2

基本单词scope:false表示 - directive从调用它的位置获取相同的控制器范围。

另一方面，scope:{}是一个隔离范围，它使用指令的内部范围，仅在指令模板上实现

您可以尝试使用ng-transclude类似的内容：

<div my-dir>{{$parent.test}}</div>

和

  .directive("myDir", () => {
    return {
      scope: {},
      transclude: true,
      restrict: "A",
      template: '<div ng-transclude></div>',
      link: (scope, element) => {
          scope.test = 'my test';
      }
    };
  });

Codepan Demo

在链接函数中设置范围属性

2 个答案: