ページのコンテンツが読み込まれた後に呼び出したい関数があります。$viewContentLoaded について読みましたが、うまくいきません。私は次のようなものを探しています
document.addEventListener('DOMContentLoaded', function () {
//Content goes here
}, false);
上記の呼び出しは、AngularJs コントローラーでは機能しません。
$viewContentLoadedのドキュメントによると、動作するはずです
ngView コンテンツがリロードされるたびに発行されます。
$viewContentLoaded
イベントが発行されます。つまり、このイベントを受け取るには、次のような親コントローラーが必要です
<div ng-controller="MainCtrl">
<div ng-view></div>
</div>
からMainCtrl
イベントを聞くことができます
$scope.$on('$viewContentLoaded', function(){
//Here your view content is fully loaded !!
});
デモを確認する
次のようにディレクティブと角度要素ready
メソッドを使用します。
.directive( 'elemReady', function( $parse ) {
return {
restrict: 'A',
link: function( $scope, elem, attrs ) {
elem.ready(function(){
$scope.$apply(function(){
var func = $parse(attrs.elemReady);
func($scope);
})
})
}
}
})
<div elem-ready="someMethod()"></div>
または、controller-as構文を使用している場合...
<div elem-ready="vm.someMethod()"></div>
これの利点は、UI を好きなだけ広くまたは細かくすることができ、コントローラーから DOM ロジックを削除していることです。これが推奨されるAngularの方法であると私は主張します。
同じノードで他のディレクティブが動作している場合は、このディレクティブを優先する必要がある場合があります。
{{YourFunction()}}
HTML要素の後に追加することで直接呼び出すことができます。
ここに がありPlunker Link
ます。
Googleチャートを処理しながら、このロジックを実装する必要がありました. 私がしたことは、コントローラー定義内のhtmlの最後に追加したことです。
<body>
-- some html here --
--and at the end or where ever you want --
<div ng-init="FunCall()"></div>
</body>
その関数では、ロジックを呼び出すだけです。
$scope.FunCall = function () {
alert("Called");
}
$digest already in progress エラーが発生している場合は、次の方法が役立つ場合があります。
return {
restrict: 'A',
link: function( $scope, elem, attrs ) {
elem.ready(function(){
if(!$scope.$$phase) {
$scope.$apply(function(){
var func = $parse(attrs.elemReady);
func($scope);
})
}
else {
var func = $parse(attrs.elemReady);
func($scope);
}
})
}
}