我正在学习 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>
我希望你能帮我解决这个小事
最佳答案
在你的 Angular 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>关于javascript - 在 AngularJS 中使用元素属性评估作用域对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37394585/