AngularJS 指令传递字符串

Question

该指令试图创建一个称为进度条的 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
}

});

Answer 1

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

在这种模式下，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
  }
  

您可以在Angular $compile documentation找到更多关于绑定模式的信息