Question

我正在学习AngularJS指导模块。

在指令中使用范围时，我对范围的工作方式有点困惑。

我写了一个代码请看看，

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
    <title>Example 6</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("HollywoodCtrl",HollywoodCtrl);
            angular.module("MyApp").controller("BollywoodCtrl",BollywoodCtrl);
            angular.module("MyApp").directive("parentClass",parentClass);


            function parentClass(){
                var obj = {     
                    restrict : 'EA',
                    controller : "BollywoodCtrl",
                    scope: {
                        array : "=bollywoodActors"
                    },  
                    template : "<ol><li ng-repeat='actor in array'>{{actor}}</li></ol>",
                    link : function(scope,element,attrs,someCtrl){  
                        var actorList = scope.actorList, count = 0;

                        for(count = 0;count < actorList.length; count++){
                            console.log(" -+- "+actorList[count]);      
                        }                           
                    }
                }

                return obj;
            };


            function HollywoodCtrl($scope){                 
                $scope.actorList = ["Jim Carrey","Sean Connery","Tom Cruise","Samuel L Jackson","Colin Firth"]                  
            };

            function BollywoodCtrl($scope){
                $scope.actorList = ["Shahrukh Khan","Salmaan Khan","Amir Khan"]                 
            };

        })();
    </script>
</head>
<body>
    <div class="container" ng-controller="HollywoodCtrl">
        <div class="well">
            <b>Bollywood Actors</b>
            <parent-class bollywood-actors="actorList"></parent-class>
            <pre />
            <b>Hollywood Actors</b>
            <ul>
                <li ng-repeat="actor in actorList">{{actor}}</li>
            </ul>
        </div>
    </div>
</body>

让我解释一下我的目的。

我有一个控制器'HollywoodCtrl'，它是一个父控制器，在其范围内包含数组'actorList'中的好莱坞演员姓名。

我有一个指令'parentClass'，我在其中指定了'BollywoodCtrl'，

现在，我在UI中需要的是，在标签'parent-class'中我想要显示控制器'BollywoodCtrl'范围内的宝莱坞演员，

在指令之外，我需要展示好莱坞演员出现在控制器'HollywoodCtrl'的范围内。

但是

我能看到的是好莱坞演员出现在'父级“指令内的父控制器中以及它之外。

请看这里的实例 Directive Scope live demo

你能告诉我我的错吗，

我将如何获得所需的输出

即使我将控制器分配给指令，也会从父控制器的范围中获取数据

0 个答案: