角度JS指令作用域变量关系

Angular JS directives scope variable relationship

本文关键字：变量 关系 作用域 指令 JS 角度      更新时间：2023-09-26

我试图理解Angualr JS指令。但是我对父控制器和指令之间的范围和关系感到困惑。例如：

1）我将"hello-world"指令（它有自己的控制器，请检查下面的代码）插入到"myCtrl"中，我的意思是作为一个孩子。

2）我在指令中有一个变量"指令Var"，控制器中有一个变量"controllerVar"，每个变量都有不同的值。

3）我的困惑如下：

    由于 myCtrl 是 "hello-world" 指令
  • 的父指令，所以默认情况下，"hello-world" 指令范围可以从控制器继承变量
  • 但是我也可以在父级中看到子"hello-world"指令变量，我的意思是myCtrl。
  • 这怎么可能，我的意思是孩子可以继承父值，但父母怎么可以继承子值？
  • 指令中的控制器有什么用（我知道原因，但我很困惑，如果我遗漏了什么，我只是想了解一下）。

var myapp = angular.module('myapp', []);
angular.module('myapp').directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World<br /> <br />{{color}} <br /> <br /> {{directiveVar}}',
    controller: function ($scope) {
        $scope.color = '#0080ff';
        $scope.directiveVar = "I am directive varible";
    },    
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        console.dir(scope);
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});
angular.module('myapp').controller('myCtrl', function($scope) {
    $scope.color = '#ffb399';
    $scope.controllerVar = "I am controller varible";
});    
<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <title>AngularJS: UI-Router Quick Start</title>
    <!-- Bootstrap CSS -->
    <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    
</head>
<body ng-controller="myCtrl">
  <input type="text" ng-model="color" placeholder="Enter a color" /> 
  <br />
  <br />
  {{color}}
  <br />
  <br />
  {{directiveVar}}
  <br /> <br /> 
  <hello-world/>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="lib/angular-bootstrap-contextmenu/contextMenu.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</body>
</html>

这是一个很大的问题，但让我们看看我们是否可以解决每一个问题。 为了进一步阅读，这是一个很好的概述文章

首先，指令可能有也可能没有自己的范围。

它们不会自动获得自己的范围。 您必须将其添加为指令声明的一部分。 在不重写别人的博客文章（或文档）的情况下，这里有一些基本规则：

  1. 作用域 ： 假 （指令使用其父作用域）

  2. 范围 ： 真 （指令得到它自己的范围..."子"范围）

    3. 作用域

  3. ：{ } （指令得到一个新的隔离作用域）

这大约是您需要了解的基本概述。 要记住的另一件事是，默认情况下，指令会获取自己的子作用域（例如 - Scope：true 是默认设置）。

正如我所说，顶部的文章链接真的很棒。 我不想写一本关于指令范围的书，但如果您有任何要添加的内容，请发表评论，因为我认为基本的指令/范围"概述"帖子会很方便。

我会在这里添加一堆链接，但我认为最常链接的范围讨论非常技术性和详细。 不是世界上最伟大的起点（除非你喜欢悬崖跳水）。

相关文章：