web-dev-qa-db-ja.com

AngularJSディレクティブの双方向データバインディング

データベースに保存されているフィールドのタイプとそのパラメータに応じて、フォームに異なる「ウィジェット」を表示できるように、ディレクティブを定義しようとしています。さまざまな種類のシナリオに対応する必要があるため、レイアウトを処理するディレクティブが必要です。

いくつかの例を試しながら、* kin **が機能するコードを思い付きました。

HTML

<input type="text" ng-model="myModel" style="width: 90%"/>  
<div class="zippy" zippy-title="myModel"></div>

指令

myApp.directive('zippy', function(){
    return {
      restrict: 'C',
      // This HTML will replace the zippy directive.
      transclude: true,
      scope: { title:'=zippyTitle' },
      template: '<input type="text" value="{{title}}"style="width: 90%"/>',
      // The linking function will add behavior to the template
      link: function(scope, element, attrs) {
            // Title element
            element.bind('blur keyup change', function() {
                scope.$apply(read);
            });

            var input = element.children();


            function read() {
                scope.title = input.val();
            }
        }
    }
});

これは機能しているように見えますが（*適切な* angularJS変数のバインディングよりも明らかに遅いですが）、これを行うにはもっと良い方法があるはずです。誰でもこの問題に光を当てることができますか？

javascriptdata-bindingframeworksangularjs
29
Tiago Roldão

$applyメソッドを実際にトリガーする理由は、実際には必要ないのでわかりません。

Angularページから使用した例を編集し、入力を含めました。それは私のために動作します： http://jsfiddle.net/6HcGS/2/

[〜＃〜] html [〜＃〜]

<div ng-app="zippyModule">
  <div ng-controller="Ctrl3">
    Title: <input ng-model="title">
    <hr>
    <div class="zippy" zippy-title="title"></div>
  </div>
</div>​

[〜＃〜] js [〜＃〜]

function Ctrl3($scope) {
  $scope.title = 'Lorem Ipsum';
}

angular.module('zippyModule', [])
  .directive('zippy', function(){
    return {
      restrict: 'C',
      replace: true,
      transclude: true,
      scope: { title:'=zippyTitle' },
      template: '<input type="text" value="{{title}}"style="width: 90%"/>',
      link: function(scope, element, attrs) {
        // Your controller
      }
    }
  });

[〜＃〜] update [〜＃〜]maxisamは正しい。変数を値にバインドする代わりにng-modelを使用する必要があるそのようです：

<input type="text" ng-model="title" style="width: 90%"/>

作業バージョンは次のとおりです： http://jsfiddle.net/6HcGS/3/

27
F Lekschas

thisのようなものですか？

基本的に@Flekの例を使用します。
唯一の違いはng-model='title'

双方向バインディングを行うコツはng-modelであり、 document で次のように述べています。

ngModelは、Angular双方向のデータバインディングを行うよう指示するディレクティブです。入力、選択、テキストエリアと連携して動作します。 。ngModelを使用する独自のディレクティブを簡単に作成できます。

<input type="text" ng-model="title" style="width: 90%"/>
11
maxisam

ディレクティブのコールバックパラメーターに渡す方法を次に示します。コントローラーテンプレート：

    <component-paging-select-directive
            page-item-limit="{{pageItemLimit}}"
            page-change-handler="pageChangeHandler(paramPulledOutOffThinAir)"
            ></component-paging-select-directive>

ディレクティブ：

angular.module('component')
    .directive('componentPagingSelectDirective', [
        function( ) {
            return {
                restrict: 'E',
                scope: { 
                    // using the '=' for two way doesn't work
                    pageItemLimit:  '@', // the '@' is one way from controller
                    pageChangeHandler: '&'
                },
                controller: function($scope) {   
                    // pass value from this scope to controller method. 
                    // controller method will update the var in controller scope
                    $scope.pageChangeHandler({
                        paramPulledOutOffThinAir: $scope.pageItemLimit
                    })

                }, ...

コントローラー内：

angular.module('...').controller(...
        $scope.pageItemLimit = 0; // initial value for controller scoped var

        // complete the data update by setting the var in controller scope 
        // to the one from the directive
        $scope.pageChangeHandler = function(paramPulledOutOffThinAir) {
            $scope.pageItemLimit = paramPulledOutOffThinAir;
        }

ディレクティブ（キーとしてパラメーターを持つオブジェクト）、テンプレート（ディレクティブのパラメーターオブジェクトからの「ラップされていない」キー）、およびコントローラー定義の関数パラメーターの違いに注意してください。

3
Henry