AngularJs指令 - 如何從指令內獲取屬性值

任何想法如何從指令內部訪問屬性值？AngularJs指令 - 如何從指令內獲取屬性值

angular.module('portal.directives', []) 
     .directive('languageFlag', ['$routeParams', function(params) { 
      return function(scope, element, attrs) { 
       console.log(attrs["data-key"]); // returns undefined 
       console.log(element.attr('data-key')); // returns {{data-key}} 
       angular.element(element).css('border', '1px solid red'); 
      }; 
     }]);

HTML代碼：

<ul> 
    <li ng-repeat="lng in flags"> 
     <a class="lngFlag {{flag.Key}}" data-key="{{flag.Key}}" data-id="{{lng.Id}}" ng-click="changeLangHash({'lng':lng.Id })" language-flag></a> 
    </li> 
</ul>

感謝

來源

2013-04-30 Ashraf Fayad

只需遵循駱駝案例中的破折號 - – 2013-04-30 12:59:23

使用$observe：

觀察內插屬性：使用$observe觀察包含內插的屬性的值的變化（例如src="{{bar}}"）。這不僅非常高效，而且也是輕鬆獲得實際值的唯一方法，因爲在鏈接階段，插值尚未進行評估，因此此時的值設置爲undefined。 - directives doc

return function(scope, element, attrs) { 
    attrs.$observe('key', function(value) { 
     console.log('key=', value); 
    }); 
}

如在評論中提及@FMM，data由角時，它歸一化的屬性名稱，因此，使用的上述key，而不是dataKey剝離。

來源

2013-04-30 16:08:31

謝謝。它適用於除蛇符號之外的所有屬性。比如數據。但我接受你的答案，因爲它實際上與其他屬性一起工作。我很欣賞你的努力和時間。 – 2013-04-30 16:52:03

角度可能會修剪'data'前綴（http：//docs.angularjs。org/guide/directive）：「可選地，該指令可以用x-或data-作爲前綴，以使其符合HTML驗證器。」用「數據」來啓動你的（邏輯）屬性名稱可能是一個壞主意。 – FMM 2013-04-30 17:58:22

嘗試attrs["dataKey"] - 這是HTML解析與破折號（-）屬性的方式。如果你想從範圍，而不是{{something}}值，你可以做兩件事情：

scope[attrs['dataKey']] - '工作，但不應該這樣做

或使用$parse但那麼就不要使用`{{ }}`

app.directive('languageFlag', ['$routeParams','$parse', function(params,$parse) { 
    return function(scope, element, attrs) { 
    var value = $parse(attrs.dataKey)(scope); 
    console.log(value); 
    angular.element(element).css('border', '1px solid red'); 
    }; 
}]);

，或者您可以使用$interpolate以同樣的方式像$parse但{{}}

來源

2013-04-30 12:55:29 g00fy

感謝您的回答。 console.log（attrs [「dataKey」]）; // = undefined console.log（scope [attrs ['dataKey']]）; // = undefined 我甚至刪除了所有的{{}}並嘗試了。$ parse，但仍然是'undefined'。沒有辦法在綁定時間簡單地訪問底層模型嗎？ – 2013-04-30 13:29:58

將父範圍傳遞給$ parse（例如：'$ parse（attrs.uid）（$ scope。$ parent）'）解決了我的問題 – manikanta 2013-07-02 13:28:50

@ g00fy但是如果屬性是雙向綁定值呢？我的代碼只會在指令加載時解析它，但不會注意到對變量所做的更改（來自父範圍）。 – 2016-01-07 10:39:30

我，如果你是該指令的鏈接功能，其獲取的attrs參數中建議使用對象符號：

attrs.yourAttributeName

來源

2014-11-25 15:56:31

角條「數據 - 」關閉任何屬性，因此，如果您的屬性是'數據密鑰'，只需使用'密鑰'，而不是'dataKey'

來源

2015-05-18 18:36:47

我有一個屬性名稱爲「data-actiontype」，只是actiontype我沒有從該屬性獲取數據。這個名字是預定義的嗎？ – Kathir 2016-03-17 13:23:42

@Kathir很難說沒有看到你的代碼。希望你從14個小時前提出以後就明白了。如果沒有，你應該能夠看到這個頁面上的答案，並嘗試一些不同的東西，搞清楚。 – 2016-03-18 04:15:51

感謝您的回覆。請在下面看到我的標籤'Currently I am從標籤中刪除'data-'。我還沒弄明白。 – Kathir 2016-03-18 04:19:29

AngularJs指令 - 如何從指令內獲取屬性值

回答

相關問題