3

AngularJS では、ディレクティブの属性内で変数を使用するにはどうすればよいですか?

ディレクティブがなければ、これはうまくいきます:

<a 
    href="#/fruits/{{ fruit.short }}/details" 
    title="Back to Fruit details">
    Back
</a>

ディレクティブを使用すると、これは機能しません:

<backButton 
    href="#/fruits/{{ fruit.short }}/details" 
    title="Fruit details">
</backButton>


MyApp.directive( 'backbutton', function() 
{
    return {
        restrict: 'E',
        link: function( scope, element, attrs ) 
        {
            var href    = attrs.href;
            var title   = attrs.title;

            console.log( "href = " + href );    // undefined
            console.log( "title = " + title );  // Fruit details

            element.html('<a href="' + href + '" title="Back to ' + title + '">Back</a>');
        }
    };
});

ディレクティブ自体は、たとえばhref="#/fruits/novariableused". しかし、href属性で変数を使用するとすぐに、その値は になりundefinedます。

どうすればこれを修正できますか?

4

2 に答える 2

9

Angular は、リンク プロセス後に href 属性を補間しますが、属性を観察することはできます。それはドキュメントにあります：ディレクティブ属性

attrs.$observe('href', function ( value ) {
    // here you have the href
});

実際に見てみましょう: JSFiddle

于 2013-06-10T08:38:59.050 に答える