[javascript] 如何獲取自定義指令中的評估屬性



2 Answers

對於需要在不使用隔離範圍的指令中進行插值的屬性值,例如,

<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);
    })
 }
});

directive頁面,

觀察插值屬性:使用$observe觀察包含插值的屬性的值更改(例如, src="{{bar}}" )。 這不僅非常高效,而且也是輕鬆獲取實際值的唯一方法,因為在鏈接階段插值尚未進行評估,因此此時將值設置為undefined

如果屬性值只是一個常數,例如,

<input my-directive value="123">

如果值是數字或布爾值,則可以使用http://docs.angularjs.org/api/ng.$rootScope.Scope#$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

Question

我試圖從我的自定義指令中獲得一個評估屬性,但我找不到正確的方法。

我已經創建了這個jsFiddle來詳細說明。

<div ng-controller="MyCtrl">
    <input my-directive value="123">
    <input my-directive value="{{1+1}}">
</div>

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

我錯過了什麼?




對於同樣的解決方案,我正在Angularjs directive with ng-Model尋找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



很多好的答案在這裡,但有時候你只是想要一個簡單的,簡單的,舊的jQuery-ish解決方案。

我的解決方案不處理對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 
}



Related