AngularJS指令传递string

该指令试图创build一个名为进度条的HTML元素，用于在页面移动页面时跟踪进度。 我正在尝试开发它以用于： <progress-bar progress='1' max='6' error="true"></progress-bar>

我只是试图将HTML中的^^元素的信息传递给我的指令，并处理信息以适当地更改进度条。

这是工作的“进步”和“最大”采取整数值，但由于某种原因，注释掉的代码，这将处理“错误”（这是一个string）是造成问题。 我是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 } 

}）;

Answer 1

在您的指令中，您正在使用全局范围中的属性双向绑定到指令局部范围。

在这种模式下，html中的属性值被评估为一个expression式，因此您的指令试图将其本地scope.error绑定到作为expression式求值的结果。

当你testingscope.error == "true" ，你实际上正在testingtrue == "true" ，这在javascript中计算为false 。

要解决您的问题，您可以：

• 调用您的指令时使用带引号的string：

   <progress-bar progress='1' max='6' error="'true'"></progress-bar> 

• 或者在你的指令中改变你的绑定模式，因为你不需要双向绑定。 @variables始终是stringtypes。

   return { restrict: 'AE', scope: { max: '@max', progress: '@progress', error: '@error' }, link: compileProgressBar } 

您可以在Angular $ compile文档中find更多关于绑定模式的信息