Isolate Scope "="バインディングとドット表記AngularJS

ネストされたプロパティを持つ2ウェイバインディングを、分離されたスコープ内でドット付き表記で作成する方法を教えてください。私は'myObject.data': "=data"がうまくいくと思ったが、そうはしなかった。私はmyObjectオブジェクトのすべてをリンクしたくありません。私は時計のいくつかの並べ替えを行うことができることを知っているが、'myObject.data'きれいだ。Isolate Scope "="バインディングとドット表記AngularJS

.directive("myDirective", [function() { 
    return { 
     restrict: "E", 
     scope: { 
      'myObject.data': "=data" 
     }, 
     link: function (scope, element, attrs) { 

      scope.myObject = { 
       data: "myValue" 
      }; 
     } 
    }; 
}])

出典

2014-01-12 Warren

孤立スコープは、一般的にのみテンプレートと便利です、彼らはあなたのディレクティブを解釈する属性をする方法を宣言するための方法として使用すべきではありません。これは、テンプレートを持たないほとんどのディレクティブが、通常、子スコープまたは環境の直接スコープのセマンティクスを必要とするためです。

オブジェクト参照は双方向データバインディングを有効にするものなので、おそらく$ watchは必要ありませんが、あなたの完全なコードはわかりません。場合

を使用すると、1つの普通の孤立スコープセマンティクスへの翻訳を知りたい：

@name -> attrs.name 
=name -> $scope.$eval(attrs.name); 
&name -> function() { return $scope.$eval(attrs.name); }

EDIT 2：あなたのコメントの後

を、私はこのplunkerを思い付きました。双方向データバインディングを保持するには、 "。"を使用する必要があります。あなたのNGモデル宣言で。これは、双方向データバインディングが値型に対して機能しないのは、それらが不変なためです。たとえば、100という値を変更することはできません。参照型オブジェクトを渡して、変更している値をハングアップする必要があります。分離されたスコープ定義の値への完全なパスを指定することは、双方向のデータバインディングが可能になるという原則に基づいては不可能です。

Javascriptを：

angular.module('plunker', []) 

.directive('twoWay', function() { 
    return { 
    restrict: 'E', 
    template: '<div><input ng-model="thing.name" type="text" /></div>', 
    scope: { 
     thing: "=" 
    }, 
    link: function(scope, element, attrs) { 
    } 
    }; 
}) 

.controller('MainCtrl', function($scope) { 
    $scope.data = { 
    name: "World" 
    }; 
});

HTML：

<body ng-controller="MainCtrl"> 
    <p>Hello {{data.name}}!</p> 
    <two-way thing="data"></two-way> 
    </body>

出典

2014-01-12 06:02:14 mortalapeman

ディレクティブには、入力要素を持つテンプレートがあります。 <入力ng-model = "myObject.data" ...>。この入力要素のモデルがドット付き表記法を使用している場合、親スコープとの双方向バインディングをどのように作成しますか。私は、ディレクティブにスコープを分離する必要があります。 – Warren

@ user1273184私の編集後、それはあなたの質問に答えますか？ – mortalapeman

@ user1273184あなたのコメントは隔離範囲が必要な理由を説明していません。質問にあなたのアプローチの背後にあるテンプレートと推論を置くべきです。 – zeroflagL

私はこれらの場合に使用すると、以下の通りです：

.directive("myDirective", [function() { 
    return { 
     restrict: "E", 
     scope: { 
      data: "=" 
     }, 
     controller: function($scope){ 
      $scope.dot = $scope //<--- here is the trick 
     } 
    }; 
}])

その後、あなたは常にからディレクティブのスコープでdataを変更することができますウォッチャーを設定しないで継承したスコープdot.data = 'whatever' s。

非常にエレガントではありませんが、controller asの構文を使用していない場合にはうまく動作し、$parentの悪夢は望ましくありません。

出典

2015-01-27 12:24:49 david

Isolate Scope "="バインディングとドット表記AngularJS

答えて

関連する問題