3

入力に初期値 "Toto" が表示されるようにするには、ディレクティブにどのスコープを指定する必要がありますか? scope:true を取りたくない

HTML コード:

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
   <input customattr type = "text" ng-model="value.name" />   
</body>
</html>

JS コード:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.value = {"name":"Toto", "id":1};

});

    app.directive('customattr', function () {
      return {
          restrict: 'A',
          scope: {
          },
          link: function (scope, element, attrs) {

          } 
      }; 
    });

プランカーはこちら: http://plnkr.co/edit/JxWElWhTeBbNpFHS0wYT

4

1 に答える 1

8

これは、AngularJS のディレクティブとスコープでよく遭遇するものの 1 つだと思います。以下のソリューションと推奨事項を理解するには、AngularJS DOM 要素とスコープについて 1 つのことを理解する必要があります。

AngularJS では、1 つの DOM 要素は 1 つだけのスコープに関連付けられます。

これは、特定の要素の属性のサブセットを、あるスコープと別のスコープの別のサブセットで動作させることができないことを意味します。これは、属性が 1 つのスコープ (ディレクティブによって要素でng-model定義されたもの) と別のスコープ (ディレクティブで作成された分離されたもの)で機能することを期待する plunker でやろうとしていることとまったく同じです)。<body>ng-controllercustomattr

この状況から抜け出すには、基本的に 2 つの方法があります。

1) ng-model="$parent.value.name"ng-model ディレクティブを特定のスコープに明示的にポイントするために使用します。しかし、これはもろく、明らかではありません。

2) 属性ディレクティブから分離スコープを削除します。経験則として、入力フィールドの属性として使用されることになっているディレクティブで分離されたスコープを使用しないことをお勧めします (と組み合わせてng-model)。サービスを使用して、引き続き属性の値を取得できます$parse。

于 2013-04-22T11:21:36.833 に答える