我的指令使用隔离作用域，但仍然从控制器的作用域获取数据
我创建了两个指令，一个是通过控制器传入的，另一个是使用require传递的。
我所要做的只是检查指令是如何使用隔离作用域的，以及如何利用它自己作用域的数据。
但我的输出很奇怪。
请按照下面的代码，
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<title>Recipe 02 example 01</title>
<script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
<script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
<script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\js\bootstrap.js"></script>
<link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
<link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap-theme.css"></link>
<script type="text/javaScript">
angular.module("MyApp",[]);
(function(){
angular.module("MyApp").controller("myCtrl",myCtrl);
angular.module("MyApp").controller("StudentCtrl",StudentCtrl);
angular.module("MyApp").directive("parentClass",parentClass);
angular.module("MyApp").directive("childClass",childClass);
function parentClass(){
var obj = {
restrict : 'EA',
controller : "StudentCtrl"
}
return obj;
};
function childClass(){
var obj = {
restrict : 'EA',
require : "^parentClass",
scope : {
array : '='
},
template : "<ol><li ng-repeat='student in array'>{{student}}</li></ol>",
link : function(scope,element,attrs,someCtrl){
}
}
return obj;
}
function myCtrl($scope){
$scope.studentList = ["Tom Cruise","Jammy Watson","Simon Colins"]
};
function StudentCtrl($scope){
$scope.studentList = ["Shahrukh Khan","Salmaan Khan","Amir Khan"]
};
})();
</script>
</head>
<body ng-controller="myCtrl">
<parent-class>
<child-class array="studentList"></child-class>
</parent-class>
<pre />
<ul>
<li ng-repeat="student in studentList">{{student}}</li>
</ul>
</body>
在上面的代码中，有两个指令'parentClass‘和’子类‘。'childClass‘指令要求'parentClass’作为其父指令，因此'childClass‘使用控制器'StudentCtrl’
我在输出中期望的是
指令“子班”应打印“StudentCtrl”中的学生，指令外的学生应来自“myCtrl”，
但我得到的是两名学生都来自“学生from”
当我执行指令“parentClass”中的代码更改时，如下所示，
function parentClass(){
var obj = {
restrict : 'EA',
controller : "StudentCtrl" ,
scope : {
array : '='
}
}
return obj;
};输出是来自控制器'myCtrl‘的所有学生，而不管指令结束标记是什么。
现场演示的链接如下
链接一
链接二
我期待的是指令‘子班’应该输出控制器'StudentCtrl‘中的学生列表，而在指令之外的学生应该从控制器'myCtrl’输出。
请也解决我在范围上的困惑。
谢谢
回答 1
Stack Overflow用户
发布于 2015-08-25 09:05:09
在parentClass指令中，不指定scope值。这意味着它默认为false。
虚设作用域值意味着指令不会创建新的作用域，这意味着它将使用与其最近的作用域(在作用域链上)。
在这种情况下，指令使用myCtrl控制器的作用域。因此，当您指定controller: 'StudentCtrl'并注入$scope对象以设置studentList变量时，您将覆盖myCtrl控制器中的值，从而给出意想不到的结果。
解决这一问题的一种方法是将scope: true作为parentClass指令的一个选项，从而迫使该指令创建一个新的作用域，而不是覆盖它的父范围。
https://stackoverflow.com/questions/32199353
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号