2016-05-03 12 views
1

誰かが私にこれら2つのコードとその管理方法の違いを教えてください。anglejsを使用しているマークアップでスコープ変数を使用する

:ここ

は、ここに私のindex.htmlを

<body ng-app="docsIsolateScopeDirective"> 
    <div ng-controller="Controller"> 
    <my-customer info="naomi" ></my-customer> 
    {{nameUser}} 
    <my-customer info="igor"></my-customer> 
</div> 
</body> 

は私script.js

(function(angular) { 
    'use strict'; 
angular.module('docsIsolateScopeDirective', []) 
    .controller('Controller', ['$scope', function($scope) { 
    $scope.nameUser = 'naomi'; 
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' }; 
    $scope.igor = { name: 'Igor', address: '123 Somewhere' }; 
    }]) 
    .directive('myCustomer', function() { 
    return { 
     restrict: 'E', 
     scope: { 
     customerInfo: '=info' 
     }, 
     templateUrl: 'my-customer-iso.html' 
    }; 
    }); 
})(window.angular); 

そして最後に、私の私の顧客-iso.htmlです

Name: {{customerInfo.name}} Address: {{customerInfo.address}} 

結果がこれです:

Name: Naomi Address: 1600 Amphitheatre 
naomi Name: Igor Address: 123 Somewhere 

質問です:私は(「ナオミ」が含まれている基本的には$ scope.nameUser)スコープ変数と私のマークアップの情報を設定したいと思います。しかし、私は

<my-customer info={{nameUser}} </my-customer> // or <my-customer info="{{nameUser}}"> </my-customer> 

代わりの

<my-customer info= "naomi"></my-customer> 

コードを記述する際に壊れていると..スコープ変数である理由私は理解していない文字列のように考えることができないのですか?おかげ

編集:私が書く場合でも:

<my-customer info = nameUser> </my-customer> 

結果はまだ異なっています。エラーは発生しませんが、出力は次のようになります。

Name: Address: 
Name: Igor Address: 123 Somewhere 

コントローラとディレクティブとのやり取りについては何か不足していると思います。参照:https://plnkr.co/edit/hbi4whoH3Dj9lDV3vVzZ?p=preview

答えて

2

<my-customer info={{nameUser}} </my-customer>の代わりに<my-customer info="nameUser" </my-customer>を使用してください。

私はあなたが達成しようとしているものはかなりわからない:あなたは{{ }}

UPDATEは必要ありません。あなたの例では、簡単な文字列「ナオミ」を渡そうとしているが、あなたのディレクティブは次のような構造を持つオブジェクトを期待:あなたはそれが動作しているしたい場合は

customerInfo = { 
    name: "", 
    address: "" 
}; 

だから、あなたはあなたのスコープのオブジェクトを作成する必要があります次のようになります。その後、

$scope.nameUser = { name: 'XXX', address: 'YYY' }; 

などのようなディレクティブに渡し:

<my-customer info="nameUser" ></my-customer> 

this plunker.

を見てみましょう
+0

ありがとうございますが、うまくいきません。エラーは表示されませんが、結果は「名前:住所:」 – Jibeee

+0

私の回答が更新されました。これを明示してください。 –

+0

私は間違いを今理解しています。私は "naomi"は$ scope.naomiを参照する文字列であり、オブジェクト自体ではないと考えました。あなたの説明をありがとう – Jibeee

0

孤立スコープを割り当てるとき、渡された値(info = "naomi")は親スコープの割り当てられたプロパティを反映します。補間ハンドルバーはここでは機能しません。ハンドルバーを外して、 'info = "nameUser"'はそのトリックを行うべきです。 naomiがオブジェクトだったのに対し、nameUserは単なる文字列であることを覚えておいてください。したがって、naomi.nameは文字列を生成しましたが、nameUser.nameは機能しません。

+0

あなたの答えをありがとう。私が正しければ、プロパティ "nameUser"は親スコープから来ます。どうすればこの問題を解決できますか? – Jibeee

1

ここで重要な違いがあります。あなたのディレクティブでは、ディレクティブのスコープcustomerInfoアトリビュートの割り当てに "= info"を使用します。 =は、参照による割当を意味します。したがって、{{}}を評価式として使用することはできません。例えば、あなたが使用した場合、

customerInfo: '@info' 

あなたのコードは正常に動作します。 '@'は評価された値にプロパティをバインドするためです。 あるいは、そうでない場合は、ちょうどまた

<my-customer info="nameUser"> </my-customer> 

する<my-customer info={{nameUser}} </my-customer>から{{}}評価式を削除し、$scope.nameUserが文字列であるので、あなたが受け取る空の出力は、ですが、あなたはあなたの中にnameaddress属性を持つオブジェクトを期待しています指令。

+0

ありがとうございます。編集を見てください – Jibeee

+0

こんにちは!ありがとう、私は私の答えを更新しました。上記をご覧ください。 –

+0

私は間違いを今理解しています。私は "naomi"は$ scope.naomiを参照する文字列であり、オブジェクト自体ではないと考えました。説明ありがとうございます – Jibeee

関連する問題