For a project, I am incorporating AngularJS along with the Angular Strap plugin. The page features a table where one of the columns consists of various links.
Upon clicking a link, it triggers Angular Strap's dropdown menu to appear as a contextual menu.
This particular dropdown menu is comprised of two items:
- details,
- board.
When clicking on the "details" item, it smoothly opens up Angular Strap's aside section displaying relevant data - this functionality works seamlessly.
The issue arises when attempting to have the second item redirect to a specific page using the dropdown's href attribute. My question centers around how to effectively integrate an Angular expression within this href attribute?
A snippet from my view’s code featuring the dropdown:
<button type="button" class="btn btn-link"
ng-click="selectGroup(group)"
data-html="1"
data-animation="am-flip-x"
data-placement="bottom",
bs-dropdown="dropdown">
{{ group.name }}
</button>
The dropdown definitions for Bs-dropdown are as follows:
$scope.dropdown = [
{
text: "Details",
click: "showDetails()" // Triggers Angular Strap's aside.
},
{
text: "Board",
href: "/group/{{ $scope.group.number }}" // Currently not evaluating correctly.
}
];
Clicking on the "Board" item in the dropdown leads to a redirection linking to something like: "127.0.0.1:8000/#/group/{{group.number}}" instead of the expected result "127.0.0.1:8000/#/group/2".
To work around this issue, I devised another method named openBoard() as depicted below:
var openBoard = function() {
var groupNumber = $scope.group.number;
window.location.href="127.0.0.1:8000/#/" + groupNumber;
}
Although utilizing this method within the "Board" item does provide a solution, it brings about additional problems and lacks the desired semantic correctness.
Furthermore, upon the initial page load (upon the controller being initialized), the value stored in $scope.group appears as undefined. I ensure to set the appropriate value once the group link from the table mentioned above is clicked (just before the dropdown displays).
If anyone possesses ideas on effectively implementing Angular expressions within Angular Strap's dropdown (specifically within href attributes), please share your insights!