Question

我是AngularJS的新手并尝试创建我的第一个自定义指令。

实际上我创建了两个指令，每个指令都使用它自己的控制器。也许我弄错了但我希望每个指令控制器都使用它自己的隔离$ scope。但在“指令一”的模板中，我可以从“指令二”中调用变量，反之亦然。

如何为每个指令获取一个隔离的$ scope，以便每个指令的模板只能使用它自己的变量？

的index.html：

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

  <head>
    <script src="https://code.angularjs.org/1.2.28/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>   
    <h1>Testing Custom Directives</h1>
    <hr />
    <directive-one></directive-one>
    <directive-two></directive-two>
  </body>

</html>

的script.js：

var app = angular.module('application', [ ]);

app.directive('directiveOne', function(){
  return {
    restrict: 'E',
    template: '<h3>Directive 1</h3> {{dirCtrlOne.name}} {{dirCtrlTwo.year}}',
    controller:function(){
        this.name = 'John';
    },
    controllerAs: 'dirCtrlOne'
  }
});

app.directive('directiveTwo', function(){
  return {
    restrict: 'E',
    template: '<h3>Directive 2</h3> {{dirCtrlTwo.year}} {{dirCtrlOne.name}}',
    controller:function(){
        this.year = 1990;
    },
    controllerAs: 'dirCtrlTwo'
  }
});

Answer 1

默认情况下，指令会继承父级的范围，并且通过向指令范围添加变量，也可以将其添加到父级。这就是为什么你的指令都可以访问其他变量的原因。要将示波器隔离，请尝试以下代码：

var app = angular.module('application', [ ]);

app.directive('directiveOne', function(){
  return {
   restrict: 'E',
   scope: true,
   template: '<h3>Directive 1</h3> {{dirCtrlOne.name}} {{dirCtrlTwo.year}}',
   controller:function(){
     this.name = 'John';
   },
   controllerAs: 'dirCtrlOne'
 }
});

app.directive('directiveTwo', function(){
   return {
      restrict: 'E',
      scope: true,
      template: '<h3>Directive 2</h3> {{dirCtrlTwo.year}}   {{dirCtrlOne.name}}',
      controller:function(){
       this.year = 1990;
    },
    controllerAs: 'dirCtrlTwo'
 }
});

Answer 2

在您的指令中编写scope: {}，将指令的范围与任何父范围隔离

来自AngularJS documentation

顾名思义，指令的隔离范围是隔离的除了您已明确添加到范围的模型之外的所有内容：{} 哈希对象。这在构建可重用组件时很有用，因为它可以防止组件更改模型状态，除了您明确传入的模型。

AngularJS自定义指令 - 控制器变量'串扰'

2 个答案: