Check out my fiddle here, where I am trying to build a group of checkboxes. Everything works perfectly in the prototype, allowing me to include multiple groups that run independently. However, when I added the code to my app and inserted the html template: '<>', the directive does not display. The model data inside the handle bars in the template is visible though. I can't seem to figure out what the issue is as there are no errors.
You can also view this working example on Plunker here
<div class="sqs" >
<pre>
{{survey | json}}
</pre>
<suvey-checkbox ng-model="Q1" ng-init="surveyQuestions = [
{ 'value':'value1', 'name': 'The unit' },
{ 'value': 'value2', 'name': 'Patient Threw Up'},
{ 'value':'value3', 'name': 'Unsafe for children' },
{ 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
</suvey-checkbox>
<suvey-checkbox ng-model="Q2" ng-init="surveyQuestions = [
{ 'value':'value1', 'name': 'The unit' },
{ 'value': 'value2', 'name': 'Patient Threw Up'},
{ 'value':'value3', 'name': 'Unsafe for children' },
{ 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
</suvey-checkbox>
</div>
Meanwhile
var app = angular.module("app", []);
app.run(function($rootScope){
$rootScope.survey = [];
});
app.directive('suveyCheckbox', function ($rootScope) {
return {
restrict: 'E',
require: '^ngModel',
scope: {
ngModel: '@'
},
template: '{{ngModel}}<br /><label ng-repeat="surveyQuestion in surveyQuestions" class="checkbox">' +
'<input data-role="none" type="checkbox" name="selectedExclusion[]" value="{{surveyQuestion.value}}"' +
'ng-checked="surveyAnswers.indexOf(surveyQuestion.value) > -1" ng-click="togglesurveyAnswers(surveyQuestion.value)"> ' +
'{{surveyQuestion.name}} <br /></label>{{surveyAnswers}}',
link: function (scope, elem, attr) {
// selected exclusion
scope.surveyAnswers = [];
// toggle surveyAnswers for a given answer by name
scope.togglesurveyAnswers = function togglesurveyAnswers(surveyQuestion) {
var idx = scope.surveyAnswers.indexOf(surveyQuestion);
// is currently selected
if (idx > -1) {
scope.surveyAnswers.splice(idx, 1);
}
// is newly selected
else {
scope.surveyAnswers.push(surveyQuestion);
}
};
$rootScope.survey.push(scope.surveyAnswers);
}
}
});
The code from the linked fiddle prototype doesn't seem to work for some reason.