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指令傳遞字符串

回答

相關問題