Моя директива использует изолированную область, но все еще выбирает данные из области контроллера

0

Я создал две директивы, один с контроллером, который прошел, а другой с требованием передал его.

Я пытаюсь сделать это, чтобы просто проверить, как директивы используют изолированные области и использовать данные своей собственной области.

Но мой выбор странный.

Пожалуйста, следуйте приведенному ниже коду,

<!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, независимо от тега закрытия директив.

Ссылки для живой демонстрации таковы:

Ссылка 1

Ссылка 2

Я ожидаю, что директива "child-class" должна выводить список студентов, присутствующих в контроллере "StudentCtrl", а учащийся вне директив должен выводить из контроллера "myCtrl",

Пожалуйста, разрешите мою путаницу и в области.

благодаря

  • 0
    вам нужен этот jsfiddle.net/L0osn87g ?
  • 0
    Нет, мне нужно распечатать студентов, присутствующих в StudentCtrl и myCtrl. Директива 'child-class' должна печатать студентов из контроллера 'StudentCtrl', а после закрывающего тега директивы 'parent-class' должна печатать студентов из контроллера 'myCtrl'. Пожалуйста, дайте мне решение и объясните мне
Показать ещё 2 комментария
Теги:
angularjs-directive

1 ответ

0
Лучший ответ

В вашей parentClass директивы, вы не указали scope значение. Это означает, что по умолчанию значение false.

Значение ложной области означает, что директива не создает новую область, то есть она будет использовать область, которая ближе всего (вверх по цепочке областей) к ней.

В этом конкретном случае директива использует область действия контроллера myCtrl. Таким образом, когда вы указываете controller: 'StudentCtrl' и controller: 'StudentCtrl' объект $scope для установки переменной studentList, вы перезаписываете значение в контроллере myCtrl тем самым давая вам неожиданные результаты.

Один из способов решения этой проблемы - поместить scope: true в качестве опции в директиву parentClass, тем самым вынудив директиву создать новую область и не перезаписать ее родителя.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню