AngularJS 指令传递字符串 [英] AngularJS Directive Passing String

问题描述

该指令试图创建一个名为 progress bar 的 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="容器">\<div class="row">';变量 i = 1;while (i <= parseInt(scope.max)) {如果(我<= parseInt(scope.progress)){//if (scope.error == "true"){//...//}//别的 {append += '<div class="col-xs-1"><div class="circle-filled"><center>'+i+'</center></div></div>'//}} 别的 {append +='<div class="col-xs-1"><div class="circle-hallow"><center>'+i+'</center></div></div>'}我++;}append += '

'elem.append(append);elem.bind('点击', function(){如果(范围.进度> 1){历史.back();范围.$应用()；}});}返回 {限制:'AE'，范围: {最大值:'=最大值'，进度:'=进度'//错误:'=错误'},链接:compileProgressBar}

});

解决方案

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

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

当您测试 scope.error == "true" 时，您实际上是在测试 true == "true" 并且结果为 false 在 javascript 中.

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

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

• 或更改指令中的绑定模式，因为您不需要双向绑定.@ 变量总是字符串类型.

  return {限制:'AE'，范围: {最大值:'@max'，进度:'@progress'，错误:'@错误'},链接:compileProgressBar}

您可以在 Angular $compile 文档

This directive is trying to create an HTML element called progress bar that tracks progress as you move page to page. I'm trying to develop it to be used as : <progress-bar progress='1' max='6' error="true"></progress-bar>

I'm simply trying to pass the information from the ^^element in html to my directive and process the information to change the progress bar appropriately.

This is working for "progress" and "max" which take integer values, but for some reason the commented out code, which would process "error" (which is a string) is causing problems. I'm new to angularJS so I'm sorry if any of this sounds confusing or unclear... please ask if I need to elaborate/clarify. Thanks in advance!

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
}

});

解决方案

In your directive, you're using the bi-directional binding of attributes from the global scope to the directive local scope.

In this mode, the attribute value in the html is evaluated as an expression and thus your directive tries to bind its local scope.error to the result of evaluating true as an expression.

When you test scope.error == "true", you're actually testing true == "true" and this evaluates to false in javascript.

To fix your problem, you can:

• either use a quoted string when calling your directive:

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

• or change your binding mode in your directive since you don't need the bi-directional binding. @ variables are always of type string.

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

You can find more information on the binding modes in Angular $compile documentation

这篇关于AngularJS 指令传递字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！