When working with Angular.js, I'm attempting the following:
index.html
<div class="data-tabs-sms-scroll" ng-show="question.type == 'open'"
ng-controller="AudioMessagesCtrl"
ng-include="'/templates/audioMessages.html'"></div>
<div class="data-tabs-sms-scroll" ng-hide="question.type == 'open'"
ng-controller="QuestionDetailCtrl"
ng-include="'/templates/questionDetail.html'"></div>
app.js
ulizaApp.controller('AudioMessagesCtrl', ['$scope', 'QuestionResponse', 'ngAudio',
function($scope, QuestionResponse, ngAudio) {
console.log(
'questionDetailCtrl',
$scope.$parent.question.id,
$scope.$parent.question.type
);
}]);
ulizaApp.controller('QuestionDetailCtrl', ['$scope', 'Question',
function($scope, Question) {
console.log(
'questionDetailCtrl',
$scope.$parent.question.id,
$scope.$parent.question.type
);
}]);
Firefox console output
"questionDetailCtrl" 563 "multi" AudioMessagesCtrl.js:6:4
"questionDetailCtrl" 563 "multi" QuestionCtrl.js:6:4
"questionDetailCtrl" 564 "open" AudioMessagesCtrl.js:6:4
"questionDetailCtrl" 564 "open" QuestionCtrl.js:6:4
I want to ensure that the AudioMessagesCtrl is only instantiated when question.type is “open”, and the QuestionDetailCtrl is created whenever question type differs from open.
This approach doesn't seem to be working for me. Any suggestions?
Thank you!