$scope.myWork()
テンプレートをレンダリングした後にメソッドを実行するにはどうすればよいですか? を設定したいのですが$scope.value
、その後、JQuery で何かを変更する必要があります (例: テンプレート コンテンツの DOM)。$scope.$watch('value', function (){....})
レンダリングの「前」で動作しています (テンプレートの DOM はまだ利用できません)。ありがとう。
5 に答える
モデルが更新されてビューがレンダリングされた後、属性ディレクティブでスコープ付きメソッドを呼び出すため に使用terminal
します(私の場合、$ Resource.queryの後にiframeのサイズを変更します)。transclude
.directive('postRender', [ '$timeout', function($timeout) {
var def = {
restrict : 'A',
terminal : true,
transclude : true,
link : function(scope, element, attrs) {
$timeout(scope.resize, 0); //Calling a scoped method
}
};
return def;
}])
$timeoutは黒魔術です。JSメソッドを属性値として宣言し、それを$parseすることが可能であるはずです。
だから私はそれをng-repeat
(私の場合は木が再帰的にレンダリングされる)で使用します:
<div post-render ng-repeat="r in regions | orderBy:'name'" ng-include="'tree_region_renderer.html'">
私もこの問題を抱えていました.他の解決策はうまくいきませんでした.分度器が解決したに違いないことのように思えました. 分度器のクライアント側スクリプトを簡単に確認angular.getTestability(element)
すると、実際にテストをいつ実行するかを知るために使用されることがわかります。このメソッドは、保留中のタイムアウトまたは HTTP 要求がなくなるまで待機してから、コールバックを実行します。これが私の指示です:
export function afterRender ($timeout) {
"ngInject";
return {
restrict: 'A',
terminal: true,
link: function (scope, element, attrs) {
angular.getTestability(element).whenStable(function() {
console.log('[rendered]');
});
}
};
}
上記の Jens の回答は機能しますが、新しい AngularJS バージョン (1.2.3 など) では、同じタグの属性として postRender ディレクティブを ng-repeat と組み合わせて使用できないことに注意してください。その場合、transclude を削除するか、postRender ディレクティブ属性を持つ別のタグを付ける必要があります。
また、同じタグでより優先度の高い属性が原因で属性が無効になる可能性があるため、terminal: true を使用する場合は属性の優先度にも注意してください。
DOM レンダリングをプロファイリングする方法を探していたときに、このページを見つけました。私のユースケースで機能する非常に単純なソリューションを見つけました。
ng-init ハンドラーを DOM 要素にアタッチし、ハンドラー関数で $timeout を使用して実行します。例:
HTML:
<div ng-init="foo()">
JS:
$scope.foo = function() {
$timeout(function() {
// This code runs after the DOM renders
});
});