javascript-AngularJS指令传递字符串

此伪指令试图创建一个称为进度条的HTML元素,该元素可在您逐页移动时跟踪进度。 我正在尝试将其用作:     <progress-bar progress='1' max='6' error="true"></progress-bar>

我只是试图将信息从html中的^^元素传递给我的指令,并处理该信息以适当地更改进度栏。

这对于采用整数值的“ progress”和“ max”有效,但是由于某种原因,注释掉的代码将处理“错误”(这是一个字符串),这会引起问题。 我是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个解决方案
104 votes

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

在这种模式下,html中的属性值作为表达式求值,因此您的指令尝试将其本地scope.error绑定到将表达式作为true求值的结果。

当您测试return { restrict: 'AE', scope: { max: '@max', progress: '@progress', error: '@error' }, link: compileProgressBar } 时,实际上是在测试true == "true",这在javascript中评估为false。

要解决您的问题,您可以:

  • 在调用指令时都使用带引号的字符串:

    return {
        restrict: 'AE',
        scope: {
           max: '@max',
           progress: '@progress',
           error: '@error'
        },
        link: compileProgressBar
    }
    
  • 或在指令中更改绑定模式,因为您不需要双向绑定。 @变量始终为字符串类型。

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

您可以在Angular $ compile文档中找到有关绑定模式的更多信息。

rluta answered 2019-10-06T20:45:43Z
translate from https://stackoverflow.com:/questions/21001198/angularjs-directive-passing-string