I'm just starting out with angular, and I'm encountering a challenge. Here is the HTML code that I am working with:
<div ng-repeat="el in elements">
<div ng-basicmenuinput basic-input="el"></div>
</div>
In my controller, I have defined the following elements:
$scope.elements = [
{
type: "A",
name: "AAA"
},
{
type: "B",
name: "BBB"
}
];
Additionally, I have created a directive as shown below:
.directive('ngBasicmenuinput', function () {
return {
restrict: 'A',
replace: true,
scope: {
basicInput: "="
},
template: function () {
return '<div class="basicMenuInput">{{basicInput.name}}</div>';
}
}
})
Now, within the template function, I want to customize the template based on the value of basicInput.type:
template: function () {
if(basicInput.type=="A") // basicInput is undefined
return '<div class="basicMenuInput">{{basicInput.name}}</div>';
}
Unfortunately, I am facing an issue where basicInput is undefined. My intention is to dynamically change the template based on the type. Is there a more Angular-friendly approach to achieve this?