angular jsはカスタムディレクティブの属性を監視してangularバインドする値を受け入れるために
ここに私がこれまでに持っているものがあります:
<tile title="Sleep Duration" data-value="{{sleepHistory.averageSleepTime}}"/>
app.directive('tile', [function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var title = attrs.title;
attrs.$observe('dataValue', function(val) {
var data = val;
console.log(data);
var dom =
"<div>" +
"<p>" + title + "</p>" +
"<p>" + data + "</p>" +
"</div";
$(element).append($(dom.trim()));
});
}
};
}]);
しかし、観測値は未定義として戻ってきます
http://docs.angularjs.org/api/ng.$compile.directive.Attributes から:
これらすべてはAngularでは同等として扱われます:
<span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a">
したがって、属性data-value
はvalue
に正規化します
だから、これはあなたが望むものです:
attrs.$observe('value', function(val) {
value
ではなくdataValue
をご覧ください。
attrs.$observe('value', function (val) { ...
ディレクティブにnew attribute
の代わりにdata-value
を使用することもできます。
<tile title="Sleep Duration" your-new-attribute={{sleepHistory.averageSleepTime}}" />
attrs.$observe('yourNewAttribute', function (newValue, oldValue) {
if (newValue && newValue !== oldValue) {
// ...
}
});