Получить значение из трех вариантов

Я новичок в AngularJS, и я интегрировал PHP-приложение с Angular. Недавно я пытаюсь получить значения из трех вариантов.

Я сделал два файла в редакторе плункеров в качестве примера http://plnkr.co/edit/CA2D5RDvZeBQLnMUXFOH?p=preview

Выборы следующие:

<body ng-app="MyForm">

<!-- comment -->
        <div ng-controller="programsController">
        <select name="program" id="program" ng-model="program"
        ng-options="prog.name for prog in programs">
        </select>
        program.name {{program.name}}
        selected_program {{selected_program}}
        </div>

<!-- comment -->
        <div ng-controller="periodsController">
        <select name="period" id="period" ng-model="period"
        ng-options="period.name for period in periods">
        </select>
        </div>

<!-- comment -->
        <div ng-controller="teacherController">
        <select name="teacher" id="teacher" ng-model="teacher"
        ng-options="teacher.name for teacher in teachers">
        </select>
        </div>

        <button ng-click="vals()">Click</button>

    </div>

MyForm - основной модуль приложения

angular.module('MyForm',['Programs','Periods','Teachers'])
.factory('myFactory', function() {
    console.log('Factory loaded');
    var course = {
        program : 'no set',
        setValues : function (program){
            course.program=program;
            //course.period=period;
            //course.teacher=teacher;
        },
        sayHello : function(){
            alert('hello');
        }
    }
    //console.log(course);
    return course;
})

.controller('mainController',['$scope','myFactory',function($scope,myFactory){

    $scope.vals = function(){
        //myFactory.setValues(myFactory.program);
//myFactory.sayHello();

        alert('The values are:' +
            '\nProgram: ' + myFactory.program +
            '\nProgram: ' + myFactory.period +
            '\nProgram: ' + myFactory.teacher);
    }
}]) ;

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

angular.module('Programs',[])
    .factory('proFactory',function(){
        var selected_program = '0';
        console.log('From proFactory');
    })

    .controller('programsController',function($scope,myFactory){
        $scope.programs=[
        {ID:1 , name:'HTML'},
        {ID:2 , name: 'AngularJS'}
        ];

        $scope.program = $scope.programs[0];
        //myFactory.setValues($scope.program.ID);
});

angular.module('Periods',[])
    .controller('periodsController',function($scope){
    $scope.periods=[
        {ID:1 , name:'Jan-Feb'},
        {ID:2 , name: 'Mar-Apr'}
        ];
    $scope.period = $scope.periods[0];
});

angular.module('Teachers',[])
    .controller('teacherController',function($scope){
    $scope.teachers=[
        {ID:1 , name:'Mark Smith'},
        {ID:2 , name: 'Joe Cliff'}
        ];
    $scope.teacher = $scope.teachers[0];
});

Я попытался получить значения трех вариантов выбора, чтобы отправить данные другому сценарию и показать их в предупреждении раньше, но я не смог этого получить.

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

У фабрики есть объект с тремя переменными: программа, период и учитель (последние два прокомментированы) и две функции: setValues назначить данные и "Здравствуй", чтобы проверить завод.

Я прокомментировал строку кода, которая использует функцию sayHello с завода, поэтому с завода это доступно.

Кнопка в HTML имеет ng-click=vals() и эта функция находится в $ scope mainController, когда я нажимаю кнопку, я притворяюсь, что назначаю значения выбора и показываю их.

Я пытался присвоить значения через myFactory.setValues(myFactory.program); и таким образом тоже myFactory.setValues($scope.program); но $scope.program находится в сфере действия programsController

Любой комментарий или идея для этого. Заранее спасибо!!!!

Источник

2 ответа

Решение

Спасибо, Бенри.

Я нашел другое решение, используя $ parent.

В этом случае на странице есть mainController (от myFormмодуль), который содержит три контроллера из разных модулей. $scope для каждого контроллера для каждого. Я имею в виду, что область действия $ от ProgramsController не может быть использована в periodControllers.

Решение: использование $ parent.program в ng-модели из programsControllerтаким образом, угловой говорит, что модель привязана к $scope.program от mainController

HTML-код:

<div ng-controller="programsController">
        <select name="program" id="program" ng-model="$parent.program"
        ng-options="prog.name for prog in programs">
        </select>
</div>

и контроллер:

.controller('mainController',['$scope',function($scope){
    $scope.vals = function(){
        alert('The values are:' +
            '\nProgram: ' + $scope.program.name);
    }
}]) ;
Источник

Есть ли причина, по которой вам нужны три контроллера? Три контроллера - это ненужная проблема, вам нужен только один контроллер, чтобы охватить все три выбора

Таким образом, вы можете получить доступ ко всем трем значениям в одной области и передать их на завод. Я бы порекомендовал определить все ваши переменные (периоды, учителя, программы) также в одной области.

для бывших

<body ng-app="MyForm">
    <div ng-controller="mainController">
        <select name="program" id="program" ng-model="program"
         ng-options="prog.name for prog in programs">
        </select>
        program.name {{program.name}}
        selected_program {{selected_program}}


        <select name="period" id="period" ng-model="period"
         ng-options="period.name for period in periods">
        </select>

        <select name="teacher" id="teacher" ng-model="teacher"
         ng-options="teacher.name for teacher in teachers">
        </select>


    <button ng-click="vals()">Click</button>

    </div>
</body>

и в JS

angular.module('MyForm',['Programs'])
.factory('myFactory', function() {
    console.log('Factory loaded');
    var course = {
        program : 'no set',
        setValues : function (data){
            course.program=data.program;
            course.period=data.period;
            course.teacher=data.teacher;
        },
        sayHello : function(){
            alert('hello');
        }
    }
    //console.log(course);
    return course;
})

.controller('mainController',['$scope','myFactory', 'proFactory',function($scope,myFactory,proFactory){

    $scope.vals = function(){
        myFactory.setValues({
            program: $scope.program,
            period: $scope.period,
            teacher: $scope.teacher
        });

        alert('The values are:' +
            '\nProgram: ' + $scope.program +
            '\nProgram: ' + $scope.period +
            '\nProgram: ' + $scope.teacher);
    }

    // to store in programs factory:
    proFactory.set_program($scope.program);

}]) ;

РЕДАКТИРОВАТЬ: Если вам действительно нужно использовать фабрику для передачи данных между областями, вы должны определить это следующим образом:

angular.module('Programs',[])
.factory('proFactory',function(){
    var selected_program = '0';

    return {
        set_program: (function(program){ selected_program = program; }),
        get_program: (function(){ return selected_program; })
    };
});

Фабрика возвращает набор методов для получения / установки ваших переменных (API)

Источник
Другие вопросы по тегам