17

AngularJS を使用して、HTML タグの属性の値を取得および設定する最良の方法を見つけようとしています。例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebSite</title>
</head>
<body>
    <h1>Title</h1>

    <p>Praragraph1</p>

    <p data-mycustomattr="1234567890">Paragraph 2</p>

    <p>Paragraph 3</p>

    <footer>Footer</footer>
</body>
</html>

次に、URL「/home」を呼び出すときに、data-mycustomattr (別の計算に使用する) から値を取得し、それを「1」に置き換えます。

URL が「/category」の場合、data-mycustomattr から値を取得し、「2」に置き換えます。

jQuery を使用すると、非常に簡単です。

$("#myPselector").attr('data-mycustomattr');

また

$("#myPselector").attr('data-mycustomattr','newValue');

そのjQueryコードを使用して、コントローラー内に配置しましたが、正常に機能しています。しかし、私が読む限り、それは悪い習慣かもしれません。

ただし、ディレクティブを使用する私が見つけたソリューションは、このような単純なタスクには大きすぎます。だから、特別な状況で jQuery と AngularJS を組み合わせるのも悪くないのではないかと思っていました。

どう思いますか？属性の値を取得および設定するためのより良い解決策はありますか?

ジョナサンの返信に基づく回答:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My WebSite</title>
</head>
<body>
    <h1>Title</h1>

    <p>Praragraph1</p>

    <p data-mycustomattr="{{mycustomattr}}">Paragraph 2</p>

    <p>Paragraph 3</p>

    <footer>Footer</footer>
</body>
</html>

次に、コントローラーに以下を挿入しました。

$scope.mycustomattr = '1';

そして読むために：

if ($scope.mycustomattr == '1'){
    // code
}

テスト済みで正常に動作しています。

4

1 に答える 1