28

JavaScript関数からAngular関数を呼び出す方法はありますか？

function AngularCtrl($scope) {
  $scope.setUserName = function(student){  
    $scope.user_name = 'John';
  }
}

HTMLに次の機能が必要です。

jQuery(document).ready(function(){
  AngularCtrl.setUserName();
}

ここでの問題は、ページがロードされたときにHTMLコードが存在するため、htmlのngディレクティブがコンパイルされないことです。$compile(jQuery("PopupID"));だから私はDOMがロードされたときにしたいと思います。

ドキュメントの準備ができたときにAngular関数を呼び出す方法はありますか？

4

2 に答える 2

45

Angularには、ドキュメントの準備ができているかどうかをテストする独自の機能があります。手動でブートストラップを実行してから、ユーザー名を設定できます。

angular.element(document).ready(function () {
    var $injector = angular.bootstrap(document, ['myApp']);
    var $controller = $injector.get('$controller');
    var AngularCtrl = $controller('AngularCtrl');
    AngularCtrl.setUserName();
});

これを機能させるには、htmlからng-appディレクティブを削除する必要があります。

于 2012-12-20T09:13:33.023 に答える
2

上記の答えは正しいですが、アンチパターンです。ほとんどの場合、DOMを変更するか、DOMがロードされるのを待ってから何かを実行する（ドキュメントの準備ができている）場合は、コントローラーではなく、リンク関数で実行します。

angular.module('myModule').directive('someDirective', function() {
  return {
    restrict: 'E',
    scope: {
      something: '='
    },
    templateUrl: 'stuff.html',
    controller:  function($scope, MyService, OtherStuff) {
        // stuff to be done before the DOM loads as in data computation, model initialisation...
    },
    link: function (scope, element, attributes) 
        // stuff that needs to be done when the DOM loads
        // the parameter element of the link function is the directive's jqlite wraped element
        // you can do stuff like element.addClass('myClass');
        // WARNING: link function arguments are not dependency injections, they are just arguments and thus need to be given in a specific order: first scope, then element etc.
    }
  };
});

正直なところ、$ documentまたはangular.elementを有効に使用することは非常にまれであり（コントローラーだけでなくディレクティブを使用することはできません）、ほとんどの場合、デザインを確認する方が適切です。

PS：この質問は古いものですが、それでもいくつかのベストプラクティスを指摘する必要がありました。:)

于 2016-11-08T13:44:42.537 に答える