2016-06-29 9 views
1

私は新しい角度です。私は@/=のディレクティブ分離スコープの違いについて多くのブログを読んだが、それでも私は混乱している。 ここに私が試した小さな例があります。分離されたスコープ(=)が文字列で機能しないのはなぜですか?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <title>Directive Test</title> 
 
    
 
    <script type="text/javascript"> 
 
    var app = angular.module('myApp', []); 
 
    app.controller('MyCtrl', ['$scope', function ($scope) { 
 

 
    }]); 
 
    app.directive('personInfo', [function() { 
 
     return { 
 
     restrict: 'EA', 
 
     scope: { 
 
      name: '=', 
 
      age: '=' 
 
     }, 
 
     template: "My name is {{name}} . My age is {{age}}", 
 
     link: function (scope, iElement, iAttrs) { 
 
      console.log(scope.name); 
 
     } 
 
     }; 
 
    }]) 
 
    </script> 
 
</head> 
 
<body ng-controller="MyCtrl"> 
 
    <person-info name="deepak" age="25"></person-info> 
 
</body> 
 
</html>

出力:

My name is . My age is 25

名前はundefinedである私はなぜ、私はname: @をやっているときは、年齢が25 として来ている場所として、すべての作品を取得しておりませんもう一度罰金。

は私がではなく、strings.Iと数値との=作品は一方通行と結合双方向に使用=に使用@を知っている理由はわからないが、私の例では、私は親スコープとは何の関係もありません。

答えて

4

=は双方向バインディングなので、文字列を使用すると、スコープ変数deepakを渡そうとしていると考えられます。文字列を渡すには、引用符で囲む必要がありますname="'deepak'"

なぜなら、変数は数字で始めることができないので、代わりに値として解釈されるからです。

@を使用すると、範囲変数を渡すことができない単方向バインディングになります。これは値を渡すだけですので、name="deepak"name="{{somevar}}"が動作します。

1

=を使用した場合、このディレクティブは、式の背後にスコープ変数が必要です。

したがって、<person-info name="deepak">によって、この場合はnullに等しい$scope.deepakを検索するように指示します。その結果です。

数値を入力すると、純粋な数値で変数に名前を付けることができないので、数値を置き換えるためにインテリジェントな推測ができます。 =を使用した場合

文字列リテラルを使用するには、引用符の追加の層を追加する必要が <person-info name="'deepak'">

関連する問題