4

状況: 移植中、または移植中と言うべきかLakshan Perera の Simple jQuery ColorPicker (https://github.com/laktek/really-simple-color-picker) を Angular に移植します。SO で同様の問題を確認した後、コントローラーを介してプラグインのスコープを割り当てる人もいるようですが、これを行う適切な (Angular) 方法は、プラグインをディレクティブにラップすることです。私は近づいています。新しいカスタム属性を介してプラグインをビューに適切にレンダリングできますが、入力値を属性の値 (ng-model) に渡すディレクティブを設定する方法がわかりません。実際の入力は更新されますが、Angular は変更をリッスンしていないため、実際には入力値が更新されたことを認識していません。公式ドキュメントでは、カスタム属性の設定について説明しています (http://docs.angularjs.org/guide/directive)。

望ましい機能 - 

<input my-widget="{{color}}" type="text"/> <!-- my-widget instantiates my directive -->
<h1 style="color:{{color}}"></h1>          <!-- I would like the input value to dump into the attribute's value, in this case {{color}} -->

これが私がこれまでに持っているものです：

app.directive('myWidget', function(){
    var myLink = function(scope, element, attr) {

        scope.$watch('element',function(){

            var value = element.val();

            element.change(function(){

             console.log(attr.ngModel); // This is currently logging undefined

                     // Push value to attr here? 

                console.log( value + ' was selected');
            });
        });

        var element = $(element).colorPicker();
    }

    return {
        restrict:'A',
        link: myLink
    }   

});

質問: 要素の更新された値を取得するために属性値を設定するにはどうすればよいですか?

4

1 に答える 1

6

私はそれを次のように実装します：

app.directive('colorPicker', function() {
  return {
    scope: {
      color: '=colorPicker'
    },
    link: function(scope, element, attrs) {
      element.colorPicker({
        // initialize the color to the color on the scope
        pickerDefault: scope.color,
        // update the scope whenever we pick a new color
        onColorChange: function(id, newValue) {
          scope.$apply(function() {
            scope.color = newValue;
          });
        }
      });

      // update the color picker whenever the value on the scope changes
      scope.$watch('color', function(value) {
        element.val(value);
        element.change();                
      });
    }
  }
});

あなたはそれを次のように使うでしょう：

<input color-picker="color">

これが動作するjsFiddleで、おもちゃにする小さなウィジェットがいくつかあります：http: //jsfiddle.net/BinaryMuse/x2uwQ/

colorjsFiddleは、分離スコープを使用して、属性に渡されたものにスコープ値をバインドしcolor-pickerます。この値がいつ変化するかを確認$watchする式'color'を作成し、カラーピッカーを適切に更新します。

于 2012-11-27T07:09:32.290 に答える