这个问题困扰我好几天了，不知道怎么解决。
场景是:
数据库中有一个字符串为QUESTION，另一个字符串为ANSWER。
$scope.exam = {};
$timeout(function () {
$scope.exam.QUESTION = 'Find the perimeter of a rhombus whose diagonals measure 12 and 16. <br />A.10<br />B.20 <br />C.40 <br />D.80 <br />';
$scope.exam.ANSWER = 'D';
}, 500);
我使用正则表达式来拆分该QUESTION 的选项，并将 css 样式 button 应用于选项。
var myArray = /(^.*?)(?:<br ?\/?>)(A\s*?\.[\s\S]*?)(?:<br ?\/?>)(B\s*?\.[\s\S]*?)(?:<br ?\/?>)(C\s*?\.[\s\S]*?)(?:<br ?\/?>)(D\s*?\.[\s\S]*?)(?:<br ?\/?>)?<.*$/mg.exec(question);
如果该选择是正确答案，则应用 hvr-bounce-in hvr-sweep-to-right。否则，应用 hvr-buzz-out 样式。
ans = "<br /><a ng-class=\"(scope.choiceanswer === v.substring(0, 1)) ? \'hvr-bounce-in hvr-sweep-to-right\':\'hvr-buzz-out\'\">" +v +"</a>";
但我所有的选择都采用相同的样式hvr-bounce-in hvr-sweep-to-right。
我该如何解决？
'use strict';
angular.module('myApp', [])
.controller('View2Ctrl', function ($scope, $timeout) {
$scope.exam = {};
$timeout(function () {
$scope.exam.QUESTION = 'Find the perimeter of a rhombus whose diagonals measure 12 and 16. <br />A.10<br />B.20 <br />C.40 <br />D.80 <br />';
$scope.exam.ANSWER = 'D';
}, 500);
})
.directive('choicebutton', function ($compile, $interpolate, $timeout) {
return {
restrict: 'A',
scope: {
choiceanswer: '&',
question: '&',
choiceClass: '&'
},
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(scope.question, function (question) {
if (question) {
var result = "";
var ans ='';
console.log(question);
console.log(scope.choiceanswer());
var myArray = /(^.*?)(?:<br ?\/?>)(A\s*?\.[\s\S]*?)(?:<br ?\/?>)(B\s*?\.[\s\S]*?)(?:<br ?\/?>)(C\s*?\.[\s\S]*?)(?:<br ?\/?>)(D\s*?\.[\s\S]*?)(?:<br ?\/?>)?<.*$/mg.exec(question);
console.log(myArray.length);
angular.forEach(myArray, function (v, l) {
console.log(v, l);
if (l > 0) {
console.log(v.substring(0,1));
console.log(scope.choiceanswer() == v.substring(0,1));
ans = "<br /><a ng-class=\"(scope.choiceanswer === v.substring(0, 1)) ? \'hvr-bounce-in hvr-sweep-to-right\':\'hvr-buzz-out\'\">" +v +"</a>";
console.log(ans);
result += ans;
}
});
console.log(result);
$timeout(function () {
ele.html(result);
$compile(ele.contents())(scope);
}, 0);
}
});
}
};
});<link href="http://ianlunn.github.io/Hover/css/hover.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller='View2Ctrl'>
<div choicebutton="exam.QUESTION" class="text-info selectable" choiceanswer="exam.ANSWER" question="exam.QUESTION" choiceClass="choiceClass"></div>
</body>最佳答案
可能在代码片段中我简化了你的代码，但你的变体看起来很复杂。
首先，如果问题总是有这种格式，你不需要在正则表达式和简单的 split 工作。
其次，您生成字符串并编译它，而不是只使用内置的模板指令。
第三，在模板字符串中你使用了错误的 scope 和 v，因为你将它添加为文本，所以 Angular 尝试从 scope 获取它并且总是得到 undefined
'use strict';
angular.module('myApp', [])
.controller('View2Ctrl', function($scope, $timeout) {
$scope.exam = {};
$timeout(function() {
$scope.exam.QUESTION = 'Find the perimeter of a rhombus whose diagonals measure 12 and 16. <br />A.10<br />B.20 <br />C.40 <br />D.80 <br />';
$scope.exam.ANSWER = 'D';
}, 500);
})
.directive('choicebutton', function($compile, $interpolate, $timeout) {
return {
template: '<div><span>{{qText}}</span>' +
'<div ng-repeat="answer in answers">' +
' <a ng-class="{\'hvr-bounce-in hvr-sweep-to-right\':answer.selected, \'hvr-buzz-out\':!answer.selected}">{{answer.text}}</a>' +
'</div></div>',
restrict: 'A',
scope: {
choiceanswer: '=',
question: '&',
choiceClass: '&'
},
replace: true,
link: function(scope, ele, attrs) {
scope.$watch(scope.question, function(newQuestion, oldQuestion) {
if (newQuestion === undefined || newQuestion === oldQuestion) return;
var q = newQuestion.split('<br />');
scope.qText = q.shift();
scope.answers = q.map(function(item) {
return {
selected: item[0] === scope.choiceanswer,
text: item
};
});
});
}
};
});<link href="http://ianlunn.github.io/Hover/css/hover.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller='View2Ctrl'>
<div choicebutton="exam.QUESTION" class="text-info selectable" choiceanswer="exam.ANSWER" question="exam.QUESTION" choiceClass="choiceClass"></div>
</div>关于javascript - 如何使用 AngularJS 指令为字符串应用 css 样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32678241/