I've encountered an issue with a "menu directive" not updating the items in the html view when the model changes. I'm using AngularJS with a for-each statement. Here is the minimal code snippet:
The directive:
export function SideNavbarDirective() {
'ngInject';
let directive = {
restrict: 'E',
templateUrl: 'app/components/sideNavbar/sideNavbar.html',
scope: {
},
controller: SideNavbarController,
controllerAs: 'vm',
bindToController: true
};
return directive;
}
class SideNavbarController {
constructor($scope, $timeout) {
'ngInject';
$scope.myItems = [
{
displayName:"1",
highlight:true,
},
{
displayName: "2",
highlight: false,
},
{
displayName: "3",
highlight: false,
},
];
$timeout(() => {
$scope.myItems[0].highlight = false;
$scope.myItems[1].highlight = true;
$scope.myItems.length = 2;
$scope.$apply()
}, 4000);
}
}
The HTML:
<div ng-repeat="item in myItems" layout="row">
<div flex layout="column>
<div layout="row">
<span>{{item.displayName | translate}}</span><span flex=""></span><span ng-show="{{item.highlight}}">*</span>
</div>
</div>
</div>
Initial view:
1*
2
3
After the timer:
1*
2
Expected result after the timer:
1
2*
When removing an item, it reflects changes. However, modifying the content of objects in the array goes unnoticed by Angular. Any insights on what could be wrong?
EDIT: I updated the HTML to display just the value of the highlight property instead.
<div ng-repeat="item in myItems" layout="row">
<div flex layout="column">
<div layout="row">
<span>{{item.displayName | translate}}</span><span flex=""></span><span>{{item.highlight}}</span>
</div>
</div>
</div>
Now the output is: Initial view:
1 true
2 false
3 false
After the timer:
1 false
2 true
So now, the expected values are displayed. Confusion arises from the ng-show expression. Could that be the issue? Feeling more puzzled than ever.