Передача переменной в атрибут директивы

В 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.

Как это исправить?

источник

2013-06-09 Ben

Угловой будет интерполировать ваш атрибут href после процесса связывания, однако вы можете наблюдать attrs. Это в документации: Directive Attributes

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

в действии: JSFiddle

источник

2013-06-10 08:38:59 Oliver

Спасибо, т шляпа действительно помогла! :) – Ben

Я искал то же самое. Это сэкономило много времени. –

Это помогло мне. Благодаря! – Athos

JS:

var app = angular.module("app", []); 

var myButtonFn = function() { 
    return { 
    restrict: "E", 
    replace: true, 
    transclude: true, 
    scope: {href: "="}, 
    template: "<a ng-href='{{href}}' ng-transclude></a>" 
    }; 
}; 

app.directive("myButton", myButtonFn);

HTML:

<body ng-app="app"> 

    <my-button href="'http://www.google.com/'">Button</my-button> 

</body>

http://jsbin.com/iwucaw/1/edit

источник

2013-06-10 09:23:33

Хотя я предполагаю, что это работает в принципе, он не объясняет, как заставить его работать с 'link: function' (как в моем примере), а не с' template: '. Ответ Оливера объясняет это, поэтому я выберу его ответ как правильный. – Ben

Передача переменной в атрибут директивы

ответ

Смежные вопросы