web-dev-qa-db-ja.com

テンプレートスクリプトからAngularJS変数にアクセスする方法

私のコントローラー：

$scope.totals = totals;

私のテンプレート（htmlインジェクションで期待どおりに機能します）：

{{totals}}

ただし、次のように、テンプレート内のスクリプトで変数totalsにアクセスする必要があります。

<script>
  var totals = ????;
  // do stuff with totals
</script>

$scope.totals、$totals、{{totals}}などを試しましたが、何もしませんでした。私はどんな洞察にも感謝します、ありがとう！

編集：

以下は、私のコントローラーとテンプレートのjsfiddleです。テンプレート内に、$scope.totals変数を使用するスクリプトを挿入したいと思います。

http://jsfiddle.net/38CrC/

javascripthtmlangularjsangularjs-scope
15
reagan

OP回答：

最終的にディレクティブを使用して、必要な値を見つける必要がありました。使用したい値を設定するコントローラーに、次のようにディレクティブを追加しました。

'use strict';

angular.module('AdminApp')
  .controller('AdminEventsCtrl', function ($scope, collection) {
    $scope.totals = collection;
  }).directive('foo', function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs){
            //Use scope.totals here
        }
    }
});

私のテンプレートでは、宣言がありました：

<div foo></div>

これにより、変数の合計で必要なことを行うことができました。

この回答にたどり着く手助けをしてくれた@jvandemoに特に感謝します。

2
reagan

まず、AngularJSの背後にある考え方は、そのような状況を回避することです。

AngularJSに関しては、おそらくアプリケーションを再考し、ディレクティブを使用して、現在スクリプトタグに記述しているコードをカプセル化する方が良いでしょう。

ただし、そうは言っても、次のようなスコープにアクセスする方法があります。

_var $element = $('#elementId');

var scope = angular.element($element).scope();
_

詳細は documentation を参照してください。

しかし、前述のように、ほとんどの場合、これは推奨される方法ではありません。

お役に立てば幸いです。

OPがjsFiddleを投稿した後の更新：

私は http://jsfiddle.net/jvandemo/hYnBa/1/ であなたの便宜のために動作するjsFiddleを作成しました

あなたの例には_ng-controller_属性を持つ単純なdivがあるので、次のようにスコープにアクセスできます：

_<script>
    $(document).ready(function(){
        var $element = $('div[ng-controller="AdminEventsCtrl"]');
        var scope = angular.element($element).scope();
        console.dir(scope);
    });
</script>
_

ここで何が起こるかです：

  • 要素を選択します（この場合はjQueryを使用して）
  • 要素をAngularJS要素としてラップします（要素の追加メソッドを公開します）
  • 要素のscope()メソッドを呼び出す
  • その後、スコーププロパティにアクセスできます。 _scope.totals_

お役に立てば幸いです。

13
jvandemo