我的指令使用隔离范围，但仍从控制器的范围中获取数据答案

【问题标题】：My directive uses isolate scope, but still fetches data from the controller's scope我的指令使用隔离范围，但仍从控制器的范围中获取数据
【发布时间】：2015-08-25 08:40:45
【问题描述】：

我创建了两个指令，一个传入了控制器，另一个传入了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'。 “childClass”指令需要“parentClass”作为其父指令，因此“childClass”使用控制器“StudentCtrl”

我对输出的期望是

指令“child-class”应打印“StudentCtrl”中的学生，指令外的学生应来自“myCtrl”，

但我得到的是两个学生都来自控制器'StudentCtrl'，

当我在指令“parentClass”中进行如下代码更改时，

    function parentClass(){
                var obj = {     
                    restrict : 'EA',
                    controller : "StudentCtrl" ,                        
                    scope : {
                        array : '='
                    }
                }

                return obj;
            };

无论指令结束标记如何，输出都是来自控制器“myCtrl”的所有学生。

现场演示链接如下

Link One

Link Two

我期待的是指令“child-class”应输出控制器“StudentCtrl”中存在的学生列表，指令之外的学生应从控制器“myCtrl”输出

也请解决我对范围的困惑。

谢谢

【问题讨论】：

你需要这个jsfiddle.net/L0osn87g 吗？
不，我需要同时打印 StudentCtrl 和 myCtrl 中的学生。指令“child-class”应该打印来自控制器“StudentCtrl”的学生，并且在指令“parent-class”的结束标记之后应该打印来自控制器“myCtrl”的学生。请给我解决方案并解释一下
隔离范围适用于指令的模板，而不适用于其宿主元素的内容
好的，那么我将如何获得不想要的输出。请推荐我

标签： angularjs angularjs-directive

【解决方案1】：

在您的 parentClass 指令中，您没有指定 scope 值。这意味着它默认为false。

错误的范围值意味着指令不会创建新范围，这意味着它将使用最接近（在范围链上）它的范围。

在这种特殊情况下，指令使用myCtrl 控制器的范围。因此，当您指定 controller: 'StudentCtrl' 并注入 $scope 对象以设置 studentList 变量时，您会覆盖 myCtrl 控制器中的值 - 从而给您带来意想不到的结果。

解决此问题的一种方法是将scope: true 作为parentClass 指令的一个选项，从而强制指令创建一个新作用域而不覆盖其父作用域。

【讨论】：