Angularjs - how to access an ng-include template's data to modify it through another template within the same controller

Question

What I am trying to acomplish is to have two different templates within my app: one is generated through ng-repeat like so:

<div ng-repeat="data in tree" ng-include="'templates/question.html'"></div>

And the other is generated like this:

<div ng-include="'templates/question_editor.html'"></div>

So basically the question template will be generated by the user on button click and it can also nest one question within another question using the ng-repeat.

What I am trying to accomplish is that whenever I click on one of those question divs(my question template is basically a divs structure), I want the information(if any) that is inside that div(may be several fields with unique information for each question ), to be populated into some fields in my question_editor template, and as I update the question_editor template fields, it will live update the fields in the question that was clicked.

What I was thinking was in the lines of using one controller and somehow pass the variables from question to question_editor and populate the fields of question_editor. Would it better to use different controllers for each template and then pass the information between the different controllers?

jsFiddle to just show you the structure of my divs: http://jsfiddle.net/cwrEn/1/

It would help if you could add a plunker which demonstrates how you build up your div structure. — Stewie, Jul 02 '13 at 20:45
yeah I just wanted to show the way my templates are structured — Georgi Angelov, Jul 02 '13 at 22:00

score 0 · Answer 1 · answered Sep 14 '15 at 04:32

can you check this fiddle I edited from yours and let me know if it's what you want!

    angular.module("myApp", []).controller("MainController", ['$scope', function($scope) {
    $scope.currentQuestion = null;
    $scope.questions = [
        {
            name: 'question 1',
            fields:['option 1', 'option 2']
        },
        {
            name: 'question 2',
            fields:['option 3', 'option 4', 'option 5']
        },
    ];

    $scope.setCurrentquestion = function(question){
        $scope.currentQuestion = question;
    }
}]);

Angularjs - how to access an ng-include template's data to modify it through another template within the same controller

1 Answers1