How to fire a function in AngularJS controller after HTML loaded

Question

I am working on my angularJS tutorila project.

I need to fire function in controller when the HTML page loaded.

But I don't know how to implement it.

Here is my view:

<div class="row" ng-controller="SensorController as vm">
<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading clearfix">
            <h1 class="panel-title">Sensor Response</h1>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-5">
                    <table class='table borderless table-striped tableContentLeftAlign table-striped-column table-header-color'>
                        <thead>
                            <tr>
                                <th class="col-md-1">Data</th>
                                <th class="col-md-3">Data name</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="col-md-1">MessageNumber:</td>
                                <td class="col-md-3">{{vm.sensorData.MessageNumber || 'Empty' }}</td>
                            <tr>
                            </tr>
                                <td class="col-md-1">MessageID:</td>
                                <td class="col-md-3">{{vm.sensorData.MessageID || 'Empty'}}</td>
                            </tr>

                        </tbody>
                    </table>                       
                </div>
            </div>
        </div>
    </div>
</div>

Here is controller:

(function () {
"use strict";
angular.module("sensorManagement").controller("SensorController",
                                              ["SensorResource",
                                                  "$location",
                                                  "toaster",
                                              SensorController]);

function SensorController(SensorResource, $location, toaster) {
    var vm = this;


    function foo(){ 
    SensorResource.get({ id: "12345678" }, function (data) {
        vm.sensorData = data;
    },
    function (responce) {
    });
    };

    vm.SaveData = function () {
        if (!vm.sensorData) {
            alert("No data!");
            return;
        }
        SensorResource.save(vm.sensorData, function (data) {
            alert("Saved");
        },
        function (error) {
            //Here to implement exception!!!
        });
    };

    vm.GetLog = function () {
        SensorResource.query(function (data) {
            vm.log = data;
        }, function (error) {
            //Here to implement exception!!!
        });
    };
}
})();

I need the function foo() in controller SensorController to be fired after HTML is loaded.

Any idea how can I implement it?

possible duplicate of [AngularJs event to call after content is loaded](http://stackoverflow.com/questions/21715256/angularjs-event-to-call-after-content-is-loaded) — Nicklas Kevin Frank, Jul 18 '15 at 13:58
make `function foo() as vm.foo = function() { }` and add it inside ng-init — Jyoti Prakash, Jul 18 '15 at 14:26
@JyotiPrakash so as I understood the ng-init is for initializing values of the current scope.I'm right? — Michael, Jul 18 '15 at 14:55

score 0 · Answer 1 · answered Jul 18 '15 at 14:27

0

Try something like this:

$scope.$on('$viewContentLoaded', function(){
   // TODO logic
});

This code is waiting to event viewContentLoaded. This handler should acts when the page has been loaded.

I hope you work.

answered Jul 18 '15 at 14:27

robBerto

196
2
14

How to fire a function in AngularJS controller after HTML loaded

1 Answers1