using angular sub controllers for partial views? - angularjs

Question

I am creating a survey that has a dozen question 'response types' (multiple choice, sliders, check all that apply, etc.)
The definitions for each response type are stored essentially as key-value pairs in the db.
For example:
Multiple choice Response Type
Settings (one-off widget-specific properties):
[0] key: 'Number of choices', value: 3
[1] key: 'Choice type', value: 'radio'
Options (n-sized array of options):
[0] key: 'red', value: 1
[1] key: 'yellow': value: 2
[2] key: 'blue': value: 3
Slider Response Type
Settings (one-off widget-specific properties):
[0] key: 'Minimum', value: 1
[1] key: 'Maximum', value 10
Options (n-sized array of options):
(no options)
Notice that each response type needs unique settings to tell it how this widget is built. (slider wants a 'number of ticks' value, multiple choice wants an n-sized array of text labels)
So I need an HTML snippet for each response type and - I guess - each one needs its own controller.
In my question page view: I load the template like this:
<div ng-include src="vm.getResponseTemplate(vm.question.responseType)"></div>
which gets me a URL:
"questions/responses/slider-template.html"
"questions/responses/multiple-choice-template.html"
My question is, since I need a controller for each of these, how do I load it? It needs access to the parent controller for the page, since that's where all the settings are held.
I've looked nested controllers, but I'm not entirely sure how I'd implement that in my case.
Can I just add a similar line to the question page to load the script?
<script src="questions/responses/slider-controller.js"></script>
If so, what does slider-controller contain?"
The question page's controller looks like this:
(function () {
appModule.controller('tenant.views.questions.index', [
'$scope', 'abp.services.app.survey',
function ($scope, surveyService) {
var vm = this; }
]);
})();
Do I do ...
(function () {
appModule.controller('tenant.views.questions.responses.slider'...
?
I mean, I can set it up with way, but now it's scoped to the specific controller and does not have access to the parent controller.

Answer 1

Since you re using ng-include to include the templates, the concept will be like
<div ng-controller="ParentCtrl">
// Template 1
<div ng-controller="SliderCtrl">
</div>
// Template 2
<div ng-controller="MultipleChoiceCtrl">
</div>
</div>
Same with
<div ng-controller="ParentCtrl">
// Template 1
<ng-include="'slider-template.html'"/>
// Template 2
<ng-include="'multiple-choice.html'"/>
</div>
You just need to add ng-controller in every templates that you have included like examples below
slider-template.html
<div ng-controller="sliderCtrl">
// setup your code
</div>
multiple-choice-template.html
<div ng-controller="MultipleCtrl">
// setup your code
</div>
and in js controller just defined the controller
Js Controller
(function () {
appModule.controller('ParentCtrl', [
'$scope', 'abp.services.app.survey',
function ($scope, surveyService) {
var vm = this; }
]).controller('SliderCtrl', [
'$scope', 'abp.services.app.slider',
function ($scope, surveyService) {
var vm = this; }
]).controller('MultipleCtrl', [
'$scope', 'abp.services.app.slider',
function ($scope, surveyService) {
var vm = this; }
]);
})();

Answer 2

This is frustrating. I can see the properties in my object when I spit it out to console:
var vmChild = this;
vmChild.parent = $scope.$parent;
console.log(vmChild)
Object: parent > m > $parent > vm > responseValue > Array[1] > 3
That 3 is the actual value from the control in my parent. That's the value I want to read.
I can even do this
console.log($scope.$parent.$parent);
and drill down to my value:
vm > responseValue > Array[1] > 3
Yet when I do this:
console.log(vmChild.parent.$parent.vm);
I get this:
vm > responseValue > Array[0]

Answer 3

I think you're missing the purpose of angularjs main concept. You should be using directives.
Let say, your form is using the controller FormCtrl and template form.html, then in form.html you can do something like this:
(For simplicity sake, let's say you have a method in FormCtrl that tells every widget what they are. E.g. whatAmI(setting), etc. And another method to get the settings -- well maybe that's unnecessary)
<form>
<div ng-repeat="setting in ctrl.settings">
<my-checkbox ng-if="ctrl.whatAmI(setting) == 'checkbox'"
config="ctrl.getMyConfig(setting)"><my-checkbox>
<!-- ... and so on -->
</div>
</form>
So, and now, if you need to update properties from a directive to the outer scope, a good approach is to create an isolated scope in the directive and just use a 2-way binding for the properties that need to be updated upwards. Then give the directive this properties as attributes (Disclaimer, if your planning to upgrade some time in the near future to angular2, then you should avoid 2-way bindings, and use the &-binding, but.... it's not so straight forward as 2-way-bindings... it's a hard choice)
Something like this:
<my-checkbox property1="ctrl.property1"....></my-checkbox>
And in the directive:
myMod.directive('myCheckbox', {
restrict: 'EA',
scope: {}, // Use an isolated scope
controller: 'MyDirectiveController',
bindToController: {
config: '#', // this is a 1-way binding (see note below)
property1: '=' // define 2-way-binding with the '='
},
controllerAs: 'my-ctrl', // controller's name on our template
templateUrl: 'my-checkbox.html'
});
Note: If you only want to pass stuff from the top to the directive, then you don't need 2-way bindings, 1-way-binding is the right thing to do (#)... the problem here would be, that when using 1-way bindings, then the variables are passed as strings, so you would have to parse your stringyfied config back to a real variable with e.g. JSON. At the end it saves some performance on every digest cycle, but you can also use a 2-way binding there to make things easier.... I guess the decision also depends on the amounts.
On the other hand, if you don't know in the ng-repeat loop which property of FormCtrl you want to pass to the my-checkbox directive, then I would make things simple, and give it the property in the config, which the getMyConfig() method in FormCtrl would have to add. That also means you have to use 2-way-binding for the config attribute on the bindToScope.