補間された式を角度指令に渡す

私はこの質問を何度か聞いたことがあります。しかし、解決策を正しい方法で実装することはできません。私はAngularが初めてで、Observeを使うか、補間された式をカスタムディレクティブに渡して片方向バインディングを取得しようとしています。補間された式を角度指令に渡す

この動作を達成するために$ observeを使用する正しい方法がわかりません。

私はこれを試しました。

attr.$observe('oneway', function (attributeValue) { 
        scope.oneway = scope.$parent.$eval(attributeValue); 
       });

しかし見つけ、次の問題

属性の値が含まれていなければなりません{{}}他に$ evalはは失敗します。 <mydir oneway=Prop1></mydir>は、私はディレクティブ内の式を持っている場合でも、$ は1回のみ起動取得観察
```
`<mydir oneway={{Prop1}}></mydir>` fails 

But this will fail my entire objective to have a one-way binding 
between directive and parent  
```
に動作します。 {{Prop1}}を変更しても、オブザーバーの機能は発動しません。
$ observeの代わりに$ watchを使ってみました。しかし、それでも同じです。問題

コントローラとディレクティブ間の一方向バインディングを取得するためにobserve \ watchを使用する正しい方法は何ですか？ここでは、完全なコード

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>TestView</title> 
    <script src="~/Scripts/angular.js"></script> 
    <script> 
     function customdir1() { 
      var directiveDefinitionObject = {}; 
      directiveDefinitionObject.templateUrl = "/CustomControl/HtmlPage1.html"; 
      directiveDefinitionObject.scope = { oneway: "@@oneway" }; 
      directiveDefinitionObject.link = function (scope, element, attr, ctrl) { 


       attr.$observe('oneway', function (attributeValue) { 

        scope.oneway = scope.$parent.$eval("Prop1"); 
       }); 


      } 
      return directiveDefinitionObject; 
     } 

     var app = angular.module("myapp", []).controller("myCont", function ($scope) { 
      $scope.Prop1 = "TestProp1Text"; 

     }).directive("mydir", customdir1); 
    </script> 
</head> 
<body ng-app="myapp"> 
    <div ng-controller="myCont"> 
     {{Prop1}} 
     <input type="text" ng-model="Prop1" /> 
     <mydir oneway={{Prop1}}></mydir> 
    </div> 
</body> 
</html>

後

テンプレートでマークアップ（HtmlPage1.html）事前にそんなに

<b>HII</b> 
    {{oneway}} 
<input type="text" ng-model="oneway" />

おかげで..

出典

2016-08-21 Ananth

はあなたが必要なもののフィドルです。 https://jsfiddle.net/Tsalikidis/eg93q1rc/

<mydir oneway="foo"></mydir>

と、ちょうどあなたのディレクティブが唯一それが初期値です見ることになっていないとそれはそれだと決してNG-モデルが同じスコープを更新したら、更新されたと仮定すると、ディレクティブのスコープに

... 
scope: { 
    oneway: '=' 
}

出典

2016-08-21 21:46:39 Masterakos

感謝。しかし、私はデータの多方向の流れを見る。私はそれを示すためにフィドルを更新しました。あなたは確認してください。私はちょうどコントローラから指示への一方向の流れを持つ必要があります。 – Ananth

それから、「@」を使用してください。私はfiddle https://jsfiddle.net/Tsalikidis/eg93q1rc/3/を更新しました。バインディング変数には一義名を使用しないでください。私はフィドルで 'x'を使います。 – Masterakos

ありがとうございます... "バインディング変数には一意の名前を使用しないでください。" ...問題の解決策ですか？ "oneway"は予約語ですか？あなたはあなたのフィドルでさえ、xを片道に置き換えると、それはうまくいかないことがわかります – Ananth

を「=」を使用パラメータ、私はOne Time Bindingを示唆している::で始まる式は一回考えられている

（続きを読むためにスクロール）式。式結果が未定義の値である場合、1回目の式はが安定すると再計算を停止します。

唯一の本当の違いは、あなたのディレクティブのテンプレートである、あなたは今値をバインドするために、角度を言うと、この特定のスコープの変数のための任意のウォッチャーを作成しないために式の中で::接頭辞を使用していることに注意してください。

デモ：https://jsfiddle.net/eg93q1rc/2/

Javascriptを：フィドルあまりにも多くの

angular 
    .module('testApp', []) 
    .controller('testCtrl', ['$scope', function($scope) { 
    $scope.Prop1 = 'TestProp1Text'; 
    }]) 
    .directive('myDir', function($parse) { 
    return { 
     scope: { 
     oneway: '=' 
     }, 
     template: '<span>{{::oneway}}</span>', 
     link: function(scope, element, attrs) { 

     } 
    }; 
    });

Htmlの

<div ng-app="testApp" ng-controller="testCtrl"> 
    <my-dir oneway="Prop1"></my-dir> 
    <input ng-model="Prop1"> 
</div>

出典

2016-08-21 22:29:24

私は決して知らなかった::、ありがとう。 – gyc

@gycそれは隠されたビットですね！ –

補間された式を角度指令に渡す

答えて

関連する問題