我正在尝试理解 Angualr JS 指令。但我对父 Controller 和指令之间的范围和关系感到困惑。例如:
1)我将“hello-world”指令(它有自己的 Controller ，请检查下面的代码)插入到“myCtrl”中，我的意思是作为一个 child 。
2) 我在指令中有一个变量“directiveVar”，在 Controller 中有另一个变量“controllerVar”，每个变量都有不同的值。
3)我的困惑如下:
- 由于 myCtrl 是“hello-world”指令的父级，因此默认情况下，“hello-world”指令作用域可以从 Controller 继承变量
- 但我也可以在父级中看到子级“hello-world”指令变量，我的意思是 myCtrl。
- 这怎么可能，我的意思是子级可以继承父级值，但是父级如何继承子级值？
- 指令中 Controller 的用途是什么(我知道原因，但我很困惑，如果我遗漏了什么，我只是想了解一下)。
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>最佳答案
这是一大堆问题，但让我们看看是否可以解决每个问题。进一步阅读this is a great overview post
首先，指令可能有也可能没有自己的范围。
它们不会自动获得自己的范围。您必须将其添加为指令声明的一部分。在不重写别人的博客文章(或文档)的情况下，这里有一些基本规则:
范围:False(指令使用其父范围)
作用域:True(指令获取其自己的作用域...“子”作用域)
范围:{ }(指令获取新的隔离范围)
这就是您需要了解的基本概述。另一件要记住的事情是，指令默认情况下会获取它自己的子作用域(例如 - Scope:true 是默认设置)。
正如我所说，顶部的文章链接非常棒。我不想写一本关于指令范围的书，但如果您有任何要添加的内容，请发表评论，因为我认为基本的指令/范围“概述”帖子会很方便。
我想在此处添加一堆链接，但我认为 the scope discussion that is most frequently linked非常技术性和详细。不是世界上最好的起点(除非您喜欢悬崖跳水)。
关于javascript - Angular JS 指令范围变量关系，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34804551/