该指令试图创建一个名为进度条的HTML元素,用于在页面移动到页面时跟踪进度。我正在尝试将其开发用作:
<progress-bar progress='1' max='6' error="true"></progress-bar>
我只是试图将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
}
});
答案 0 :(得分:104)
在您的指令中,您正在使用从全局范围到指令本地范围的属性的双向绑定。
在此模式下,html中的属性值被评估为表达式,因此您的指令会尝试将其本地 scope.error 绑定到评估 true 的结果作为表达。
当您测试scope.error == "true"
时,您实际上正在测试true == "true"
,并在javascript中评估为 false 。
要解决您的问题,您可以:
在调用指令时使用带引号的字符串:
<progress-bar progress='1' max='6' error="'true'"></progress-bar>
或更改指令中的绑定模式,因为您不需要双向绑定。 @变量总是字符串类型。
return {
restrict: 'AE',
scope: {
max: '@max',
progress: '@progress',
error: '@error'
},
link: compileProgressBar
}