Question

我有两个控制器

“parentCntrl”和“childCtrl”

“childCtrl”用于指令，

为什么“parentCtrl”的“this”中的变量在“childCtrl”中也可见？

我认为只有$ scope变量可以继承而不是“this”中存在的变量。

请按照以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Template</title>

    <script type="text/javascript" src="/home/rahul/Installers/jquery-3.0.0.js"></script>   
    <link rel="stylesheet" type="text/css" href="/home/rahul/Installers/Bootstrapv3.0.2/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/home/rahul/Installers/Bootstrapv3.0.2/css/bootstrap-theme.css">
    <script type="text/javascript" src="/home/rahul/Installers/Bootstrapv3.0.2/js/bootstrap.js"></script>
    <script type="text/javascript" src="/home/rahul/Installers/angular.js"></script>

    <script type="text/javascript">
        angular.module("app",[]);
        angular.module("app").controller("parentCtrl",parentCtrl);
        angular.module("app").controller("childCtrl",childCtrl);
        angular.module("app").directive("loadFilms",loadFilms);

        parentCtrl.$inject = ["$scope"];
        childCtrl.$inject = ["$scope"];

        function parentCtrl($scope){
            var vm = this;
            vm.title = "Directive and nested scoping";
            vm.actorName = "Amithabh Bachhan";
            vm.year = ["70's","80's","90's"];
        }

        function childCtrl($scope){
            var vm = this;

            vm.selectedYear = "";

            vm.moviesObj = {
                "70's" : ["Anand","Lawaris","Kala Pathhar","Deewar","Amar Akbar Anthony","Mili"],
                "80's" : ["Sharabi","Kaalia","Silsila","Satte Pe Satta","Nastik","Shahensha"],
                "90's" : ["Hum","Aaj Ka Arjun", "Ajooba","Khuda Gawah","Ganga Jamuna Saraswati","Lal Badshah"]
            }

            vm.movies = [];

            vm.getMovies = function(){
                vm.movies = vm.moviesObj[vm.selectedYear];
            }
        }

        function loadFilms(){
            return {
                restrict : "EA",
                controller : "childCtrl",
                controllerAs : "cCtrl",                 
                template : function(tElem, tAttrs){
                    var str = "<select ng-model='cCtrl.selectedYear' "+
                                     "data-ng-options='y as y for y in vm.year' " +
                                     "class='form-control' "+
                                     " ng-change='cCtrl.getMovies()'>" + 
                                        "<option value=''>Select</option>" + 
                            "</select>" +
                            "<br />" + 
                            "<ol class='slide-animate-container'>" + 
                            "   <li class='slide-animate' ng-repeat='m in cCtrl.movies'>{{m}}</li>"+
                            "</ol>";
                    return str;
                }
            } 
        }
    </script>
</head>
<body>
    <div ng-app="app" ng-controller="parentCtrl as vm" class="container">
        <div class="page-header">
            <h3>{{vm.title}}</h3>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="page-header">
                    <h5>{{vm.actorName}}</h5>                       
                </div>                      
            </div>
        </div>
        <div class="row">
            <div class="col-md-6" load-films></div> 
        </div>
    </div>
</body>

从上面的代码中，请告诉我“vm.year”如何出现在下面的代码中

"<select ng-model='cCtrl.selectedYear' "+
                                     "data-ng-options='y as y for y in vm.year' " +
                                     "class='form-control' "+
                                     " ng-change='cCtrl.getMovies()'>" + 
                                        "<option value=''>Select</option>" +

指令模板的

是否可见？

vm.year是控制器“parentCtrl”的一部分，因此它不应该在“childCtrl”中可见，除非它是“$ scope.year”。但我错了，为什么？

请点击here查看工作代码。

使用Angular.js指令时是否存在Controller继承？

0 个答案: