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

问题描述

这指令是试图创建一个名为进度条的HTML元素，当您移动页面，页面跟踪进展。我想开发它被用作：
    ＆LT;进度条进度='1'最大值=6错误=​​真正的＆GT;＆LT; /进度条＆GT;

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>

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

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.

这是工作进步和最大的取整数值，但由于某些原因注释掉code，这将处理错误（这是一个字符串）导致的问题。我是新来angularJS所以我很抱歉，如果任何这听起来有点混乱或不清楚......请询问我是否需要制定/澄清。在此先感谢！

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.

在此模式下，HTML属性值计算过程为前pression，因此您的指令，试图绑定本地的 scope.error 以评估结果的真作为前pression。

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.

当您测试 scope.error ==真正的，你实际测试真正的==真正的这个计算结果为假在JavaScript。

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>

或更改绑定模式，在你的指导，因为你并不需要双向绑定。 @变量是string类型的始终。

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
}

您可以找到有关角$编译文档的结合模式

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