0

Angularjsのデータ バインディング機能について質問があります。

私が書く場合：

<div>Hello {{name}}!</div>

そして、私はcontroller.jsに次のようなものを持っています:

$scope.name = 'Bruno';

結果は "Hello Bruno!" になります...これは素晴らしいです! 今、私はテンプレートを編集しました:

<div>Hello <span id="name"></span>!</div>

また、本文を閉じる直前にこの JavaScript 関数を追加しました。

<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>

<script type="text/javascript">

  function fillName(subject) {
    $("#name").text("Hello " + subject);
  }

  fillName({{name}}); // this throws "SyntaxError: invalid property id"

</script>
</body>

だから私の質問は：

AngularJS で従来の JavaScript 関数内でデータ バインディングを使用することは可能ですか?

アップデート：

// i changed: fillName({{name}}); with:
fillName('{{name}}');

これでエラーは解決しました...しかし、まだ名前が表示されません...私はまだこれに取り組んでいます...

提案はいつでも大歓迎です!

4

2 に答える 2

2

[更新] さて、あなたはあなたの問題を解決したように見えるので、私はあなたの質問を誤解しているようですが、おそらく他の人は質問のタイトルに基づいてこの情報に出くわすでしょう.

回答の前に次の警告を付けておきます。AngularJS アプリケーションを作成している場合は、Angular アプリケーションのライフサイクルの外に出て作成するのではなく、ディレクティブなどの Angular が提供する機能を使用して、この種の作業を行うことをお勧めします。ただし、質問に対する学術的な回答のために、ここにあります。

概要

ここでアクセスしようとしている Angluar マジックは、いくつかの機能に基づいています。

スコープ(ドキュメント)

スコープは、Angular 式 (属性と二重のカーリーに入れるもの) のコンテキストを提供し、そのコンテキストでのこれらの式の評価の変化を監視するために必要な関数を提供します。たとえばScope#$watch、式の評価が変化するたびに実行されるコールバックを登録できます。

$interpolate (ドキュメント)

Interpolate は、二重巻き線内に式を含むことができる文字列を受け取り、式の結果が元の文字列に補間された新しい文字列に変換します。(呼び出し$interpolate(str)は、スコープを提供するオブジェクトに対して呼び出されると、文字列を返す関数を返します。)

それを一緒に入れて

Angular アプリを作成する場合、多くの場合、これらの詳細について心配する必要はありません。コントローラーには自動的にスコープが渡され、DOM テキストは自動的に補間されます。Angular アプリのライフサイクル外でこれらのものにアクセスしようとしているので、以前は隠れていたこれらのフープのいくつかをジャンプする必要があります。

angular.injector (ドキュメント)

app.controller、などを使用してモジュールにサービス、フィルター、ディレクティブなどを登録するapp.factoryと、指定した関数がインジェクターによって呼び出されます。Angular は Angular アプリで作成しますが、ここでは使用しないため、使用angular.injectorして自分で作成する必要があります。

インジェクターを取得したらinjector.invoke(fn)、関数を実行し、関数内で使用するfn依存関係 ( など$interpolate) を注入するために使用できます。

簡単な例

これは非常に基本的な例です

  • 入力と変数の間の双方向データバインディングを提供します
  • を使用して、HTML ビューへのデータ バインディングを提供します。$interpolate
Name: <input id="name" type="text" autocomplete="off">
<button id="setname">Set name to Bob</button>
<div id="greeting"></div>

var injector = angular.injector(['ng']);

injector.invoke(function($rootScope, $interpolate) {
  var scope = $rootScope.$new();
  var makeGreeting = $interpolate("Hello {{name}}!");

  scope.$watch('name', function() {
    var str = makeGreeting(scope);
    $("#greeting").text(str);
    $("#name").val(scope.name);
  });

  var handleInputChange = function() {
    scope.$apply(function() {
      scope.name = $('#name').val();
    });
  };

  var setNameToBob = function() {
    scope.$apply(function() {
      scope.name = "Bob";
    });
  };

  $("#name").on('keyup', handleInputChange);
  $("#setname").on('click', setNameToBob);
  handleInputChange();
});

この手法を示す jsFiddle は次のとおりです: http://jsfiddle.net/BinaryMuse/fTZu6/

于 2013-02-10T09:53:12.817 に答える
0

fillNameはグローバルであるため、コントローラーで実行できます

$scope.name = 'John';
fillName($scope.name);

しかし、これを行うことは完全に間違っています。解決するために作成されたものにAngularJSを使用しようとしています。

于 2013-02-10T11:01:44.590 に答える