这个指令试图创建一个名为progress bar的HTML元素,它可以在你逐页移动时跟踪进度。我试图将它开发为:第一个月
我只是试图将信息从html中的^^元素传递到我的指令中,并处理这些信息以适当地更改进度条。
这对"progress"和"max"是有效的,因为它们都是整数值,但是由于某些原因,处理"error"(字符串)的注解掉的代码导致了一些问题。我是angularJS的新手,所以很抱歉,如果这些听起来令人困惑或不清楚...请询问我是否需要详细说明/澄清。
app.directive('progressBar', function(){
var compileProgressBar = function(scope, elem, attrs) {
var append = '<nav class="navbar navbar-fixed-bottom navbar-footer" role="navigation">\
<div class="container">\
<div class="row">';
var i = 1;
while (i <= parseInt(scope.max)) {
if (i <= parseInt(scope.progress)) {
//if (scope.error == "true"){
//...
//}
//else {
append += '<div class="col-xs-1"><div class="circle-filled"><center>'+i+'</center></div></div>'
//}
} else {
append += '<div class="col-xs-1"><div class="circle-hallow"><center>'+i+'</center></div></div>'
}
i++;
}
append += '</div></div></nav>'
elem.append(append);
elem.bind('click', function(){
if (scope.progress > 1) {
history.back();
scope.$apply();
}
});
}
return {
restrict: 'AE',
scope: {
max: '=max',
progress: '=progress'
//error: '=error'
},
link: compileProgressBar
}
});
1条答案
按热度按时间rsaldnfx1#
在指令中,您使用的是从全局作用域到指令局部作用域的属性双向绑定。
在这种模式下,html中的属性值作为表达式计算,因此您的指令尝试将其localscope.error绑定到作为表达式计算true的结果。
当你测试
scope.error == "true"
的时候,你实际上是在测试true == "true"
,在javascript中这个值是false。要解决您的问题,您可以:
您可以在Angular $compile documentation中找到有关绑定模式的详细信息