I have a directive set up here:
myApp.directive('stoplight', function() {
return {
restrict:'E',
transclude: true,
scope: {
value: '@'
},
link: function(scope, element) {
if (scope.value === true) {
element.html('<i class="icon icon-true green"></i>');
} else if (scope.value === false) {
element.html('<i class="icon icon-false red"></i>');
} else {
element.html('<i class="icon icon-unknown yellow"></i>');
}
}
};
});
When using this directive, I include the following code:
<stoplight value="boolValue" />
The controller associated with stoplight is as follows:
myApp.controller('MyController', function($scope, $http) {
$scope.boolValue = null;
$scope.init = function() {
$scope.boolValue = false;
$http.jsonp('http://anyorigin.com/get?url=www.google.com&callback=JSON_CALLBACK')
.success(function() {
console.log('woohoo!');
$scope.boolValue = true;
});
};
$scope.init();
}};
I am encountering two puzzling issues that I cannot make sense of.
- The '
@' in my directive is not functioning correctly. Changing the '@' to a '=' seems to improve the behavior of the link function, but I prefer using one-way binding for performance reasons. - Strangely, despite setting
$scope.boolValue = true;within the success callback, the UI does not update accordingly. The icon remains red even after changing it from false to true. Even setting the value to null, expecting it to show as yellow, results in it staying red. Although 'woohoo!' is logged in the console window, indicating that the value has been updated, the visual representation does not reflect this change. There are no error messages appearing in the console either.
If anyone could assist me in identifying the root cause of these issues and providing potential solutions, I would greatly appreciate it.
Thank you.