隔離されたスコープは、値の変更をリッスンできません。

隔離されたスコープは、そのスコープの変更をリッスンするように設定されています。しかし、これは失敗します。隔離されたスコープは、値の変更をリッスンできません。

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.foo = { bar: 'hello' }; 

}) 
.directive('test-dir', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     name: '=' 
     }, 
     link: function($scope) { 
     console.log($scope.name); 

     $scope.$watch('name', function(newValue) { 
      console.log(newValue); 
     }, true); 

     } 
    }; 

});

テンプレートは、このようなものです：

<body ng-controller="MainCtrl"> 
    <p>Hello {{foo.bar}}!</p> 
    <input ng-model="foo.bar"> 

    <hr/> 
    <testDir name='foo'></testDir> 
    </body>

私はここで何をしないのですか？

Plnkr：http://plnkr.co/edit/kldjQrPPBFvlq7ZSOAeb?p=info

出典

2016-05-02 runtimeZero

あなたの指示：

.directive('testDir', function() {...

HTML：

<test-dir name='foo'></test-dir>

ディレクティブが働いていなかった最初の場所で

出典

2016-05-02 21:08:10

注意を。ここでの重要な要素は、 'directive（）'コールでのディレクティブの命名です。 –

@MikeMcCaughanあなたはそれについて確かですか？ htmlでcamelCaseの名前を使うことができないと知っている限り、 '：'、 '-'、' _'で置き換える必要があります。 –

私はちょうどテストしたし、あなたは正しいです。私はラクダのケーシングを一点で使用していたと誓っていたかもしれませんが、それは一週間以上前ですので、私の記憶は曖昧になります:)。 –

二重引用符ではなく単一のものがあるはず：name="foo"、ないfoo

もキャメルケース命名は、宣言で使用されています。それを参照するときは、ダッシュで区切られた名前を使用する必要があります。あなたは

directive('testDir', function() {...});

のようなディレクティブを持っている場合

だからその後、あなたは

<test-dir>

そしてないようにそれを使う<testDir>あなただけの命名を混ぜスコープと間違って何もない

出典

2016-05-02 21:07:24 aec

ディレクティブ名：

.directive('testDir', function() {........

のhtml名：

<test-dir name='foo'></test-dir>

も範囲の変更氏名：

name: '=?'

それが動作しない場合：HTMLはまた `testDir`形式を使用することができることを

name: '@'

出典

2016-05-02 21:20:11

隔離されたスコープは、値の変更をリッスンできません。

答えて

関連する問題