Jak uzyskać ocenione atrybuty wewnątrz dyrektywy niestandardowej

Dla wartości atrybutu, która musi być interpolowana w dyrektywie, która nie używa izolowanego zakresu, np.

<input my-directive value="{{1+1}}">

Użyj metody atrybutów $observe:

myApp.directive('myDirective', function () {
  return function (scope, element, attr) {
    attr.$observe('value', function(actual_value) {
      element.val("value = "+ actual_value);
    })
 }
});

Ze strony dyrektywy ,

Obserwacja interpolowanych atrybutów: Użyj $observe, aby obserwować zmiany wartości atrybutów zawierających interpolację(np. src="{{bar}}"). Nie tylko jest to bardzo wydajne, ale jest to również jedyny sposób na łatwe uzyskanie rzeczywistej wartości, ponieważ podczas łączenia Faza interpolacja nie została jeszcze oceniona, więc wartość jest w tym momencie ustawiona na undefined.

Jeśli wartość atrybutu jest tylko stałą, np.

<input my-directive value="123">

Możesz użyć $eval jeśli wartość jest liczbą lub wartością logiczną i chcesz mieć prawidłowy typ:

return function (scope, element, attr) {
   var number = scope.$eval(attr.value);
   console.log(number, number + 1);
});

Jeśli wartość atrybutu jest stałą łańcuchową lub chcesz, aby wartość była typu string w Twojej dyrektywie, możesz uzyskać do niej bezpośredni dostęp:

return function (scope, element, attr) {
   var str = attr.value;
   console.log(str, str + " more");
});

W Twoim przypadku, jednak, ponieważ chcesz obsługa wartości interpolowanych i stałych, użyj $observe.

Inne odpowiedzi tutaj są bardzo poprawne i cenne. Ale czasami po prostu chcesz proste: aby uzyskać zwykłą starą parsowaną wartość w instancjacji dyrektywy, bez konieczności aktualizacji, i bez mieszania z izolować zakres. Na przykład, może być przydatne dostarczenie deklaratywnego ładunku do dyrektywy w postaci tablicy lub obiektu hash w postaci:

my-directive-name="['string1', 'string2']"

element.val("value = "+angular.$eval(attr.value));

Praca Skrzypce .

Dla tego samego rozwiązania, którego szukałem Angularjs directive with ng-Model.
Oto kod, który rozwiązuje problem.

    myApp.directive('zipcodeformatter', function () {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel', // get a hold of NgModelController
        link: function (scope, element, attrs, ngModel) {

            scope.$watch(attrs.ngModel, function (v) {
                if (v) {
                    console.log('value changed, new value is: ' + v + ' ' + v.length);
                    if (v.length > 5) {
                        var newzip = v.replace("-", '');
                        var str = newzip.substring(0, 5) + '-' + newzip.substring(5, newzip.length);
                        element.val(str);

                    } else {
                        element.val(v);
                    }

                }

            });

        }
    };
});

HTML DOM

<input maxlength="10" zipcodeformatter onkeypress="return isNumberKey(event)" placeholder="Zipcode" type="text" ng-readonly="!checked" name="zipcode" id="postal_code" class="form-control input-sm" ng-model="patient.shippingZipcode" required ng-required="true">

mój wynik to:

92108-2223

var myApp = angular.module('myApp',[]);

myApp .directive('myDirective', function ($timeout) {
    return function (scope, element, attr) {
        $timeout(function(){
            element.val("value = "+attr.value);
        });

    }
});

function MyCtrl($scope) {

}

Użyj $ timeout, ponieważ dyrektywa wywołuje po załadowaniu dom, więc twoje zmiany nie mają zastosowania

Wiele dobrych odpowiedzi tutaj, ale czasami po prostu chcesz zwykły, łatwy, Stary, jQuery-owski, rozwiązanie.

Moje rozwiązanie nie obsługuje zmian w DOM. Jeśli atrybut może się zmienić, nie używaj mojej metody!

W moim przypadku miałem element i musiałem pobrać wartość atrybutu (rel).

Szablon:

<div ng-repeat="elm in array">
    <button class="poi-lines-show" rel="li-{{$index}}">button-text</button>
</div>

In my directive:

var buttons = element[0].querySelectorAll('button');
for (var i=0; i<buttons.length; i++) {
    var target = angular.element(buttons[i]);
    console.log(target.attr('rel')); // Outputs 'li-0', 'li-1', 'li-2' etc 
}