web-dev-qa-db-ja.com

ディレクティブ内の動的なngモデルバインディング

ディレクティブの裏側で動的なng-modelを使用するカスタムコンポーネントを作成しようとしています。

例として、次のようなさまざまなコンポーネントを呼び出すことができます。

<custom-dir ng-model="domainModel1"></custom-dir>
<custom-dir ng-model="domainModel2"></custom-dir>

次のようなディレクティブで：

app.directive('customDir', function() {
  return {
    restrict: 'EA',
    require: '^ngModel',
    scope: {
      ngModel: '=dirValue',
    },
    template: '<input ng-model="dirValue" />',
    link: function(scope, element, attrs, ctrl) {
      scope.dirValue = 'New';
    }
  };
});

モデルが変更された場合、ディレクティブからのテキストボックスが変更され、逆の場合も同様です。

問題は、まったく成功せずに別のアプローチを試したことです。これの1つをここで確認できます。 http://plnkr.co/edit/7MzDJsP8ZJ59nASjz31g?p=preview この例では、ディレクティブからモデルを変更していて、双方向の境界（=）であるため、両方の入力に値「New」があることを期待しています。しかし、どういうわけか、正しい方法で縛られていません。 :(

誰かが光を当ててくれたら本当にありがたいです。前もって感謝します！

angularjsangularjs-directiveangularjs-scope
15
DreaMTT

このようなもの？

http://jsfiddle.net/bateast/RJmhB/1/

HTML：

<body ng-app="test">
    <my-dir ng-model="test"></my-dir>
    <input type="text" ng-model="test"/>
</body>

JS：

angular.module('test', [])
    .directive('myDir', function() {
        return {
            restrict: 'E',
            scope: {
                ngModel: '='
            },
            template: '<div><input type="text" ng-model="ngModel"></div>',            
        };
    });
39
Banana-In-Black