7

動的 ID を持つ入力にディレクティブを追加しようとすると、link メソッドがオブジェクトに適切にバインドされません。次のjsfiddleまたは htmlがあるとします。

<div ng-app="myApp" ng-controller="MyCtrl">
  <p>Date: <input type="text" id="datepicker-{{id}}" datepicker></p>    
</div>

そしてjs：

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

module.directive('datepicker', function() {
  var linker = function(scope, element, attrs) {
    element.datepicker();
  }

  return {
    restrict: 'A',
    link: linker
  }
});

function MyCtrl($scope) {
  $scope.id = 7
}

コンソール デバッガーに表示されるのは、リンクが呼び出されると、ID が "datepicker-7" ではなく "datepicker-{{id}}" として表示されることです。

これを強制的に発生させる方法はありますか？これを実装するより良い方法はありますか?

更新：明確にする必要があります。クリックすると日付ピッカーが表示されますが、日付をクリックしても機能しません。次のエラーが表示されます:「この日付ピッカーのインスタンス データが見つかりませんでした」

4

1 に答える 1

13

バインディングtransclude:trueなどのマークアップを前処理するようにangularに指示するディレクティブの戻りオブジェクトが必要だと思います。{{ }}

datepicker()また、次の角度サイクルが実行されるまで試行を遅らせるためにへの呼び出しをラップし$timeoutて、変換された ID が DOM に設定されるようにする必要があります。

これはjsfiddleで私のために働いた

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

module.directive('datepicker', function($timeout) {
    var linker = function(scope, element, attrs) {
        $timeout( function(){
            element.datepicker();
        });
    }

    return {
        restrict: 'A',
        link: linker,
        transclude: true
    }
});

function MyCtrl($scope) {
    $scope.id = 7
}
于 2013-11-01T19:31:46.480 に答える