In the process of developing a small angular application that consists of 3 modes - QA, Production, and Sandbox. In the QA mode, there are multiple buttons for users to select values which then populate "myModel". The other two modes, Production and Sandbox, have buttons next to them to apply the previously selected QA value from myModel using the sync function.
I have implemented different templates for QA (multiple buttons) and Production/Sandbox (single button to sync from QA-myModel). While I am able to render the QA/Production template successfully, the QA template (list of buttons) is not displaying at all.
I suspect there may be an issue with how the compilation is occurring for the list of buttons.
For reference, please check out the code here: http://jsbin.com/sutipo/1/watch?html,js,output
The HTML & Directive used to dynamically select templates are as follows:
<tr>
<td> <strong>Production : </strong> </td>
<td> {{types.production.text}} </td>
<td><app-typedisplay env="production" status="non-base"></app-typedisplay></td>
</tr>
<tr>
<td> <strong>SandBox : </strong> </td>
<td> {{types.sandbox.text}} </td>
<td><app-typedisplay env="sandbox" status="non-base"></app-typedisplay></td>
</tr>
<tr>
<td><strong>QA : </strong>
<td> {{types.qa.text}} </td>
<td><app-typedisplay env="qa" status="base"></app-typedisplay></td>
</tr>
And the directive :
app.directive('appTypedisplay', function ($compile) {
var getTemplate = function (content) {
var template = '';
var base = "<button type='button' class='btn btn-default' " +
"ng-class='{active: option.text == model.text}'" +
"ng-repeat='option in options' " +
"ng-click='activate(option)'>{{option.text}} " +
"</button>";
var non_base = "<td> <button " +
'ng-click=\'sync("' + content.env + '")\'>' +
"Sync to " + content.env + "</button> </td>";
switch (content.status) {
case 'base':
template = base;
break;
case 'non-base':
template = non_base;
break;
}
return template;
};
var linker = function (scope, element, attrs) {
element.html(getTemplate(attrs));
$compile(element.contents())(scope);
};
return {
restrict: 'E',
scope: {
model: '=',
options: '=',
env: '='
},
controller: function ($scope) {
$scope.activate = function (option) {
$scope.model = option;
};
},
link: linker
};
});
As a newcomer to Angular, I would appreciate any help in understanding why the list of buttons template is not compiling correctly.
The expected output should resemble something like the following: