Как получить оцененные атрибуты внутри пользовательской директивы

для значения атрибута, которое должно быть интерполировано в директиве, которая не использует изолированную область, например,

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

использовать метод атрибутов $observe:

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

С директива страницы

наблюдение интерполированных атрибутов: использовать $observe для наблюдения за изменением значений атрибутов, содержащих интерполяцию (например,src="{{bar}}"). Это не только очень эффективно, но это также единственный способ легко получить фактическое значение, потому что во время фазы связывания интерполяция еще не была оценена, и поэтому значение в это время установлено в undefined.

если значение атрибута является просто константой, например,

<input my-directive value="123">

можно использовать $ eval если значение является числом или логическим, и вы хотите правильный тип:

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

если значение атрибута является Строковой константой, или вы хотите, чтобы значение было строковым типом в вашей директиве, вы можете доступ к нему напрямую:

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

в вашем случае, однако, поскольку вы хотите поддерживать интерполированные значения и константы, используйте $observe.

другие ответы здесь очень правильные и ценные. Но иногда вы просто хотите просто: получить простое старое проанализированное значение при создании экземпляра директивы, без необходимости обновления и без возни с областью изоляции. Например, может быть удобно предоставить декларативную полезную нагрузку в вашу директиву в виде массива или хэш-объекта в виде:

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

в этом случае вы можете сократить погоню и просто использовать хороший базовый angular.$eval(attr.attrName).

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

рабочая Скрипка.

для того же решения, которое я искал Angularjs directive with ng-Model.
вот код, который решает проблему.

    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">

мой результат:

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) {

}

используйте $ timeout, потому что директива вызывает после загрузки dom, поэтому ваши изменения не применяются

много хороших ответов здесь, но иногда вы просто хотите простой, легкий, старый, jQuery-иш, решение.

мое решение не обрабатывает изменения в DOM. Если атрибут может измениться, не используйте мой метод!

в моем случае у меня был элемент, и мне нужно было получить значение атрибута (rel).

шаблон:

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

в моей директивы:

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 
}