Question

我正在尝试理解Angualr JS指令。但我对父控制器和指令之间的范围和关系混淆。例如：

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

2）我在指令中有一个变量，＆＃34; directiveVar＆＃34;和控制器中的其他变量，＆＃34; controllerVar＆＃34;，每个都有不同的值。

3）我的困惑如下：

由于myCtrl是＆＃34; hello-world＆＃34;的父母。指令，所以默认情况下，＆＃34; hello-world＆＃34;指令范围可以从控制器继承变量
但我可以看到孩子＆＃34;你好世界＆＃34;父母中的指令变量，我的意思是myCtrl。
这怎么可能，我的意思是孩子可以继承父值，但父母如何继承子值呢？
指令中控制器的用途是什么（我知道原因，但我很困惑，如果我遗漏任何东西，我只想了解一下）。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

这是一个很多问题，但让我们看看我们是否可以解决每一个问题。如需进一步阅读this is a great overview post

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

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

范围：False（指令使用其父范围）
范围：真（指令得到它自己的范围......一个孩子的范围）
范围：{}（指令获得一个新的孤立范围）

这是一个基本的概述，因为你需要绕过。还有一件事要记住，默认情况下，指令会获得它自己的子范围（例如 - 范围：true是默认设置）。

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

我会在这里添加一些链接，但我认为the scope discussion that is most frequently linked非常技术性和详细。不是世界上最伟大的跳跃点（除非你进入悬崖跳水）。

Angular JS指令范围变量关系

1 个答案: