blocks|key|155896|text|您可以通过在HTML元素后添加{{YourFunction()}}来直接调用它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|155897|这是一个Plunker+Link。|155898|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/kQ8Y00YQeLT5PWiiC2Ke?p=preview^0|F|I|0|4|C|4|C|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

You can directly call it by adding <code>{{YourFunction()}}</code> after HTML element.

Here is a <a href="http://plnkr.co/edit/kQ8Y00YQeLT5PWiiC2Ke?p=preview"><code>Plunker Link</code></a>.

blocks|key|4662268|text|在处理google图表时，我不得不实现这个逻辑。我所做的是在我的html内部控制器定义的末尾添加了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4662269|++<body>
+++++++++--+some+html+here+--+
--and+at+the+end+or+where+ever+you+want+--
++++++++++<div+ng-init="FunCall()"></div>
++++</body>|code-block|syntax|javascript|4662270|在该函数中，只需调用您的逻辑。|4662271|$scope.FunCall+=+function+()+{
++++++++alert("Called");
}|4662272|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I had to implement this logic while handling with google charts. what i did was that at the end of my html inside controller definition i added.

<pre><code> &lt;body&gt;
 -- some html here -- 
--and at the end or where ever you want --
 &lt;div ng-init="FunCall()"&gt;&lt;/div&gt;
 &lt;/body&gt;
</code></pre>

and in that function simply call your logic.

<pre><code>$scope.FunCall = function () {
 alert("Called");
}
</code></pre>

blocks|key|4662335|text|var+myM+=+angular.module('data-module');

myM.directive('myDirect',['$document',+function(+$document+){

++++function+link(+scope+,+element+,+attrs+){

++++++++element.ready(+function(){

++++++++}+);

++++++++scope.$on(+'$viewContentLoaded'+,+function(){

++++++++++++console.log("+===>+Called+on+View+Load+")+;

++++++++}+);

++++}

++++return+{
++++++++link:+link
++++};

}]+);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4662336|上面的方法对我很有效|unstyled|4662337|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var myM = angular.module('data-module');

myM.directive('myDirect',['$document', function( $document ){

 function link( scope , element , attrs ){

 element.ready( function(){

 } );

 scope.$on( '$viewContentLoaded' , function(){

 console.log(" ===&gt; Called on View Load ") ;

 } );

 }

 return {
 link: link
 };

}] );
</code></pre>

Above method worked for me

blocks|key|155986|text|如果您收到$digest已在进行中的错误，这可能会有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|155987|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);
++++++++++++++++}

++++++++++++})
++++++++}
++++}|code-block|syntax|javascript|155988|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you're getting a $digest already in progress error, this might help:

<pre><code>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);
 }

 })
 }
 }
</code></pre>

blocks|key|156070|text|我在模板中使用了{{myFunction()}}，但后来发现了在控制器中使用$timeout的另一种here方法。我想和大家分享一下，对我来说很有用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|156071|angular.module('myApp').controller('myCtrl',+['$timeout',
function($timeout)+{
var+self+=+this;

self.controllerFunction+=+function+()+{+alert('controller+function');}

$timeout(function+()+{
++++var+vanillaFunction+=+function+()+{+alert('vanilla+function');+}();
++++self.controllerFunction();
});

}]);|code-block|syntax|javascript|156072|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/30247770/2403881^0|8|G|12|8|1E|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

I was using <code>{{myFunction()}}</code> in the template but then found another way <a href="https://stackoverflow.com/a/30247770/2403881">here</a> using <code>$timeout</code> inside the controller. Thought I'd share it, works great for me.

<pre><code>angular.module('myApp').controller('myCtrl', ['$timeout',
function($timeout) {
var self = this;

self.controllerFunction = function () { alert('controller function');}

$timeout(function () {
 var vanillaFunction = function () { alert('vanilla function'); }();
 self.controllerFunction();
});

}]);
</code></pre>

blocks|key|4662446|text|如果希望完全加载某些元素，请在该元素上使用ng-init。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4662447|例如<div+class="modal+fade"+id="modalFacultyInfo"+role="dialog"+ng-init="initModalFacultyInfo()">+..</div>|offset|length|style|CODE|4662448|控制器中应该存在initModalFacultyInfo()函数。|4662449|entityMap^0|0|2|2U|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

If you want certain element to completely loaded, Use ng-init on that element .

e.g. <code>&lt;div class="modal fade" id="modalFacultyInfo" role="dialog" ng-init="initModalFacultyInfo()"&gt; ..&lt;/div&gt;</code>

the initModalFacultyInfo() function should exist in the controller.

blocks|key|4662506|text|我发现如果你有嵌套的视图--每一个嵌套的视图都会触发$viewContentLoaded。我已经创建了这个变通方法来查找最终的$viewContentLoaded。似乎可以按照Prerender的要求设置$window.prerenderReady+(进入主app.js中的.run()+)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4662507|//+Trigger+$window.prerenderReady+once+page+is+stable
//+Note+that+since+we+have+nested+views+-+$viewContentLoaded+is+fired+multiple
//+times+and+we+need+to+go+around+this+problem
var+viewContentLoads+=+0;
var+checkReady+=+function(previousContentLoads)+{
++var+currentContentLoads+=+Number(viewContentLoads)+%2B+0;+//+Create+a+local+copy+of+the+number+of+loads
++if+(previousContentLoads+===+currentContentLoads)+{+//+Check+if+we+are+in+a+steady+state
++++$window.prerenderReady+=+true;+//+Raise+the+flag+saying+we+are+ready
++}+else+{
++++if+($window.prerenderReady+%7C%7C+currentContentLoads+>+20)+return;+//+Runaway+check
++++$timeout(function()+{checkReady(currentContentLoads);},+100);+//+Wait+100ms+and+recheck
++}
};
$rootScope.$on('$stateChangeSuccess',+function()+{
++checkReady(-1);+//+Changed+the+state+-+ready+to+listen+for+end+of+render
});
$rootScope.$on('$viewContentLoaded',+function()+{
++viewContentLoads+%2B%2B;
});|code-block|syntax|javascript|4662508|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I found that if you have nested views - $viewContentLoaded gets triggered for every of the nested views. I've created this workaround to find the final $viewContentLoaded. Seems to work alright for setting $window.prerenderReady as required by Prerender (goes into .run() in the main app.js):

<pre><code>// Trigger $window.prerenderReady once page is stable
// Note that since we have nested views - $viewContentLoaded is fired multiple
// times and we need to go around this problem
var viewContentLoads = 0;
var checkReady = function(previousContentLoads) {
 var currentContentLoads = Number(viewContentLoads) + 0; // Create a local copy of the number of loads
 if (previousContentLoads === currentContentLoads) { // Check if we are in a steady state
 $window.prerenderReady = true; // Raise the flag saying we are ready
 } else {
 if ($window.prerenderReady || currentContentLoads &gt; 20) return; // Runaway check
 $timeout(function() {checkReady(currentContentLoads);}, 100); // Wait 100ms and recheck
 }
};
$rootScope.$on('$stateChangeSuccess', function() {
 checkReady(-1); // Changed the state - ready to listen for end of render
});
$rootScope.$on('$viewContentLoaded', function() {
 viewContentLoads ++;
});
</code></pre>

blocks|key|4662519|text|var+myTestApp+=+angular.module("myTestApp",+[]);+
myTestApp.controller("myTestController",+function($scope,+$window)+{
$window.onload+=+function()+{
+alert("is+called+on+page+load.");
};
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4662520|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var myTestApp = angular.module("myTestApp", []); 
myTestApp.controller("myTestController", function($scope, $window) {
$window.onload = function() {
 alert("is called on page load.");
};
});
</code></pre>

blocks|key|156218|text|适用于我的解决方案如下|type|unstyled|depth|inlineStyleRanges|entityRanges|data|156219|app.directive('onFinishRender',+['$timeout',+'$parse',+function+($timeout,+$parse)+{
++++return+{
++++++++restrict:+'A',
++++++++link:+function+(scope,+element,+attr)+{
++++++++++++if+(scope.$last+===+true)+{
++++++++++++++++$timeout(function+()+{
++++++++++++++++++++scope.$emit('ngRepeatFinished');
++++++++++++++++++++if+(!!attr.onFinishRender)+{
++++++++++++++++++++++++$parse(attr.onFinishRender)(scope);
++++++++++++++++++++}
++++++++++++++++});
++++++++++++}

++++++++++++if+(!!attr.onStartRender)+{
++++++++++++++++if+(scope.$first+===+true)+{
++++++++++++++++++++$timeout(function+()+{
++++++++++++++++++++++++scope.$emit('ngRepeatStarted');
++++++++++++++++++++++++if+(!!attr.onStartRender)+{
++++++++++++++++++++++++++++$parse(attr.onStartRender)(scope);
++++++++++++++++++++++++}
++++++++++++++++++++});
++++++++++++++++}
++++++++++++}
++++++++}
++++}
}]);|code-block|syntax|javascript|156220|控制器代码如下所示|156221|$scope.crearTooltip+=+function+()+{
+++++$('[data-toggle="popover"]').popover();
}|156222|Html代码如下所示|156223|<tr+ng-repeat="item+in+$data"+on-finish-render="crearTooltip()">|156224|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The solution that work for me is the following

<pre><code>app.directive('onFinishRender', ['$timeout', '$parse', function ($timeout, $parse) {
 return {
 restrict: 'A',
 link: function (scope, element, attr) {
 if (scope.$last === true) {
 $timeout(function () {
 scope.$emit('ngRepeatFinished');
 if (!!attr.onFinishRender) {
 $parse(attr.onFinishRender)(scope);
 }
 });
 }

 if (!!attr.onStartRender) {
 if (scope.$first === true) {
 $timeout(function () {
 scope.$emit('ngRepeatStarted');
 if (!!attr.onStartRender) {
 $parse(attr.onStartRender)(scope);
 }
 });
 }
 }
 }
 }
}]);
</code></pre>

Controller code is the following

<pre><code>$scope.crearTooltip = function () {
 $('[data-toggle="popover"]').popover();
}
</code></pre>

Html code is the following

<pre><code>&lt;tr ng-repeat="item in $data" on-finish-render="crearTooltip()"&gt;
</code></pre>

blocks|key|156003|text|我使用setInterval等待内容加载。我希望这能帮助你解决这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|156004|var+$audio+=+$('#audio');
var+src+=+$audio.attr('src');
var+a;
a+=+window.setInterval(function(){
++++src+=+$audio.attr('src');
++++if(src+!=+undefined){
++++++++window.clearInterval(a);
++++++++$('audio').mediaelementplayer({
++++++++++++audioWidth:+'100%25'
++++++++});
++++}
},+0);|code-block|syntax|javascript|156005|entityMap^0|3|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I use <code>setInterval</code> to wait for the content loaded. I hope this can help you to solve that problem.

<pre><code>var $audio = $('#audio');
var src = $audio.attr('src');
var a;
a = window.setInterval(function(){
 src = $audio.attr('src');
 if(src != undefined){
 window.clearInterval(a);
 $('audio').mediaelementplayer({
 audioWidth: '100%'
 });
 }
}, 0);
</code></pre>

I have a function which I want to call after page content is loaded. I read about $viewContentLoaded and it doesn't work for me. I am looking for something like 

<pre><code>document.addEventListener('DOMContentLoaded', function () { 
 //Content goes here 
}, false);
</code></pre>

Above call doesn't work for me in AngularJs controller.

AngularJs event to call after content is loaded

我有一个函数，我想在页面内容加载后调用它。我读到过关于$viewContentLoaded的文章，但它对我不起作用。我在找像这样的东西document.addEventListener('DOMContentLoaded', function () {      //Content goes here }, false);上面的调用在AngularJs控制器中不起作用。

问加载内容后调用的AngularJs事件
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载内容后调用的AngularJs事件EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载内容后调用的AngularJs事件
EN