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

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

javascript angularjs

Javascript AngularJS自定义指令-控制器变量'；串扰'；,javascript,angularjs,Javascript,Angularjs,我是AngularJS的新手，正在尝试创建我的第一个自定义指令实际上，我创建了两个指令，每个指令都使用它自己的控制器。也许我弄错了，但我希望每个指令控制器都使用自己的独立$scope。但在“指令一”的模板中，我可以从“指令二”调用变量，反之亦然如何为每个指令获取一个独立的$scope，以便每个指令的模板只能使用它自己的变量 index.html： <!DOCTYPE html> <html ng-app="application"> <head>

我是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'
  }
});

var-app=angular.module（'application'，[]）；
app.directive（'directiveOne'，function（）{
返回{
限制：'E'，
模板：“指令1{{dirCtrlOne.name}{{{dirCtrlTwo.year}}”，
控制器：函数（）{
this.name='John'；
},
controllerAs:“Dirctrone”
}
});
app.directive（'directiveTwo'，function（）{
返回{
限制：'E'，
模板：“指令2{{dirCtrlTwo.year}{{dirCtrlOne.name}}”，
控制器：函数（）{
今年=1990年；
},
控制器：“dirCtrlTwo”
}
});

默认情况下，指令继承其父指令的作用域，并通过向指令的作用域添加变量将其也添加到父指令的作用域。这就是为什么两个指令都可以访问其他指令变量的原因。要隔离作用域，请尝试以下代码：

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'
 }
});

var-app=angular.module（'application'，[]）；
app.directive（'directiveOne'，function（）{
返回{
限制：'E'，
范围：正确，
模板：“指令1{{dirCtrlOne.name}{{{dirCtrlTwo.year}}”，
控制器：函数（）{
this.name='John'；
},
controllerAs:“Dirctrone”
}
});
app.directive（'directiveTwo'，function（）{
返回{
限制：'E'，
范围：正确，
模板：“指令2{{dirCtrlTwo.year}{{dirCtrlOne.name}}”，
控制器：函数（）{
今年=1990年；
},
控制器：“dirCtrlTwo”
}
});

在指令中写入

作用域：{}

，将指令的作用域与任何父作用域隔离

从

顾名思义，指令的隔离范围隔离除了已显式添加到作用域中的模型之外的所有内容：{} 散列对象。这在构建可重用组件时非常有用，因为它可以防止组件更改模型状态，但显式传入的模型