孤立したスコープの値がクリックで変化しない

私は、ディレクティブテンプレートによって単語 "Peter"を表示したいという単純な例があります。ある人がdivをクリックすると、その名前は "Juliet"に変わります。しかし、私は何もエラーと画面上に何も見えないと思っています。孤立したスコープの値がクリックで変化しない

出典

2016-05-03 Deadpool

これは、「ピーター」を式として評価するために起こります。つまり、彼は解決できない変数名です。文字列を渡したい場合は、その周りに ""を入れてください

出典

2016-05-03 06:55:00

行を共有していますか？ – Deadpool

ちょっとわかりました。実際には、

1）まず、 '='の代わりに '@'を使用してください。別のディレクティブで示された値に影響を与えてはならないと思います。

2）次に、モデル（ここでは$ scope.fname）を使用して、文字列ではなくディレクティブの値を表示する必要があります。（と言ったようにKobi Chen）

2）第3に、私はmustacheタグで表示された式でfnameをラップする必要があります。

完全なコードが与えられますよう：

<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <people name="{{fname}}"></people> 
    <people name="{{fname}}"></people> 
    <script> 
     //app declaration 
     var app = angular.module('myApp', []); 
     //controller declaration 
     app.controller('myCtrl', function($scope) { 
      $scope.fname = "Peter"; 
     }); 
     //5 directive declaration 
     app.directive('people', function() { 
      return { 
      restrict: 'E', 
      scope: {name:'@'}, 
      template: '<div ng-click="name = \'Juliet\'">{{name}}</div>', 
      } 
     }); 
    </script> 
</body> 
</html>

。また、ここからの助けを取った：あなたがスコープを使用する場合ピーターが可変である

What is the difference between '@' and '=' in directive scope in AngularJS?

出典

2016-05-03 07:50:29 Deadpool

ので"=" "ですので、いくつかの値を設定する必要がありますコントローラ内の変数

app.controller('myCtrl', function($scope) { 
    //code goes here ... 
    $scope.peter = 'John'; 
});

次に、何かが表示されます。 Peter変数に値がないので、何も表示されず、「ジュリエット」に変更するためにクリックできませんでした

出典

2016-05-03 23:25:26

孤立したスコープの値がクリックで変化しない

答えて

関連する問題