1

I'm learning AngularJs. I following this example with a few modification and i dont get it why it does not work.

The example is as follow:

<html ng-app="app">
<head>
 <title>Calendar</title>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <script src="angular.min.js"></script>
 <script>
 angular.module('app', [])
 .controller('dayCtrl', dayCtrl)
 .directive('highlight', highlight);
 function dayCtrl ($scope){
 var daysName = ['Sunday', 'Monday', 'Tuesday'];
 $scope.data = {
 day : daysName[new Date().getDay()],
 tomorrow : daysName[(new Date().getDay() + 1)]
 };
 }
 function highlight () {
 return function (scope, element, attrs){
 if(scope.day == attrs['highlight']){
 element.css('color', 'red');
 }
 }
 }
 </script>
</head>
<body>
 <div class="container">
 <div class="row panel" ng-controller="dayCtrl">
 <div class="col-sm-12 page-header clearfix">
 <h4>Angular App</h4>
 </div>
 <h4 highlight="Monday">
 Today is {{ data.day || 'unknown'}}
 </h4>
 <h4>
 Tomorrow is {{ data.tomorrow || 'unknown' }}
 </h4>
 </div>
 </div>
</body>

I hope you can help me with this little thing

asked May 23, 2016 at 15:11
4
  • what exactly is not working? Commented May 23, 2016 at 15:13
  • 1
    scope.day has no value as you haven't given it one, did you mean scope.data.day? jsfiddle.net/LfLgnao4 Commented May 23, 2016 at 15:16
  • the h4 tag does not get red when it is monday @lipp Commented May 23, 2016 at 15:19
  • use this one. if(scope.data.day == attrs['highlight']){ element.css('color', 'red'); } Commented May 23, 2016 at 15:22

1 Answer 1

1

Try like this with scope.data.day in your angular directive:

function dayCtrl($scope) {
 var daysName = ['Sunday', 'Monday', 'Tuesday'];
 $scope.data = {
 day: daysName[new Date().getDay()],
 tomorrow: daysName[(new Date().getDay() + 1)]
 };
}
function highlight() {
 return function(scope, element, attrs) {
 if (scope.data.day == attrs['highlight']) {
 element.css('color', 'red');
 }
 }
}
angular.module('app', [])
 .controller('dayCtrl', dayCtrl)
 .directive('highlight', highlight);
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
 <div class="row panel" ng-controller="dayCtrl">
 <div class="col-sm-12 page-header clearfix">
 <h4>Angular App</h4>
 </div>
 <h4 highlight="Monday">
 Today is {{ data.day || 'unknown'}}
 </h4>
 <h4>
 Tomorrow is {{ data.tomorrow || 'unknown' }}
 </h4>
 </div>
 </div>

answered May 23, 2016 at 15:24
Sign up to request clarification or add additional context in comments.

1 Comment

I'm still getting around with the $scope object. Thanks

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.