<div class="progressMain">
<div class="stocking progressWrap progress" data-progress-percent="33">
<div class="progressBar progress stocking"></div>
<div class="progressText">In Progress 3 of 7 steps</div>
</div>
</div>
我的指令范围内有 data-progress-percent 值，但我不确定如何解析 data-progress-percent 内的范围值。 我尝试了 data-progress-percent={{value}} 但它没有用。 知道如何解析 div 类中的范围变量吗？
最佳答案
在你的 Controller 中有一个scope变量被传递给你的指令。然后使用指令 template 显示百分比值(可能在指令链接的函数中进行一些计算之后)。
演示 - http://plnkr.co/edit/8DZzSjcpDqRworpxQrAs
HTML:
<body ng-app="myApp" ng-controller="myController">
<div class="progressMain">
<div class="stocking progressWrap progress" progress-percent="percentValue">
</div>
</div>
<br/><br/>
<div>Enter percentage value to be passed to directive and used as in directive template:</div>
<br/>
<input type="text" ng-model="percentValue" />
</body>
JS:
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.percentValue = 33;
});
app.$inject = ['$scope'];
app.directive('progressPercent', function () {
return {
restrict: 'A',
template: '<div class="progressBar progress stocking"></div><div class="progressText">In Progress {{percentValue}} steps</div>'
};
});
希望对您有所帮助。
关于html - 如何解析 Div 类中的 Angular 作用域变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30506414/