在AngularJS中評估具有元素屬性的作用域對象

我正在學習AngularJs。我遵循這個例子進行了一些修改，我不明白它爲什麼不起作用。在AngularJS中評估具有元素屬性的作用域對象

的例子如下：

<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>

我希望你能幫助我這個小東西

來源

2016-05-23 Luis Martinez

什麼不工作？ – lipp

'scope.day'沒有價值，因爲你沒有給它一個，你的意思是'scope.data.day'嗎？ https://jsfiddle.net/LfLgnao4/ –

當星期一@lipp –

在你的角度directive嘗試像這樣與scope.data.day：

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>

來源

2016-05-23 15:24:04

我還在使用$ scope對象。謝謝 –

在AngularJS中評估具有元素屬性的作用域對象

回答

相關問題