AngularJS指令传递字符串

这个指令是试图创建一个名为进度条的HTML元素，当您移动一页一页地跟踪进展。我试图开发它用作： <progress-bar progress='1' max='6' error="true"></progress-bar>AngularJS指令传递字符串

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

这是工作了“进步”和“最大”的取整数值，但由于某些原因，注释掉的代码，它会处理“错误”（这是一个字符串）导致的问题。我是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 
}

}）;

来源

2014-01-08 profoundWanderer

什么是history.back找到绑定模式的详细信息（）; –

你确定错误是一个字符串不是布尔值吗？ –

history.back（）将回退功能添加到进度条 - 当您单击进度栏时，它的作用与单击浏览器上的后退按钮相同。这是正确的方式。此外，你是正确的，错误应该是一个布尔值。然而，我仍然不明白如何将一个布尔值从html传递给指令：/ 再一次，非常感谢 – profoundWanderer

在你的指令，你正在使用从全球范围属性的双向绑定到该指令局部范围。

在这种模式下，在HTML中的属性值被评估为的表达式，因此你的指令尝试其本地scope.error结合评估真作为表达的结果。

当您测试scope.error == "true"时，您实际上正在测试true == "true"并且此评估为false在javascript中。

解决您的问题，您可以：呼唤你的指令时

或者使用带引号的字符串：

<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

来源

2014-01-08 17:49:23 rluta

这非常有帮助;非常感谢。然而，问题还不是比较测试评估错误....出于某种原因，当我取消注释错误：'=错误'时，我的站点崩溃了。出于某种原因，此行导致问题并将其更改为“错误：'@ error'”未能解决问题。我很高兴知道我现在的代码会测试'true =='true“'我已经到了那个阶段，所以再次感谢 – profoundWanderer

以上的提示我假设您在取消注释错误之后添加了一个逗号避免简单的语法错误。取消注释时，您的控制台错误是什么？ – rluta

哇.. ROOKIE错了！感谢rluta，为了预见我真正的问题并确定我目前的/愚蠢的一个。解决了。非常感激。 – profoundWanderer

AngularJS指令传递字符串

回答

相关问题