Breaking News: Grepper is joining You.com. Read the official announcement!

How do I call a controller function after my object has loaded

SAMER SAEID answered on May 11, 2022 Popularity 1/10 Helpfulness 1/10

answer How do I call a controller function after my object has loaded

related How do I call a controller function after my object has loaded

How do I call a controller function after my object has loaded

Comment

var app = angular.module('App', []);

// Allow iframe loading from various sources
app.config(["$sceDelegateProvider", function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads
        "self",
        // Allow YouTube iframes
        "https://www.youtube.com/embed/**"
    ]);
}]);

// Allow a directive "iframe-onload" in HTML
app.directive('iframeOnload', [function(){
return {
    scope: {
        callBack: '&iframeOnload'
    },
    link: function(scope, element, attrs){
        element.on('load', function(){
            return scope.callBack();
        })
    }
}}]);

// Main controller
app.controller('MainCtrl', function($scope, $sce) {
  $scope.car = 'Mercedes';
  $scope.carCount = 0;
  $scope.iframeSource = "";
  
  // INIT
  $scope.increaseCount = function () {
 
    // First wait on iframe load
    $scope.onIframeLoad = function () {
      console.log('Iframe fully loaded');
      
      increaseCount(); // If iframe loaded then execute main INIT logic
    };
    
    
    // INIT body - main INIT logic
    function increaseCount () {
      $scope.$apply('carCount = 10'); // change $scope.carCount to 10
    }
    
  };
  
  // Load iframe when clicked on the button
  $scope.loadIframe = function () {
    console.log("Clicked on the button.");
    $scope.iframeSource = "https://www.youtube.com/embed/Ra__OWuOU1M";
  }
  
});

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: call controller function javascript loaded object

Link to this answer
Share Copy Link

Contributed on May 11 2022

SAMER SAEID

0 Answers Avg Quality 2/10

Closely Related Answers

How do I call a controller function after my object has loaded

Comment

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="App" ng-controller="MainCtrl" ng-init="increaseCount()">

  <h1>{{ car }} count: {{ carCount }}</h1>

  <iframe iframe-onload="onIframeLoad()" ng-src="{{ iframeSource }}"></iframe>
  
  <button ng-click="loadIframe()">Load Iframe</button>
  
</div>

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: loaded object whatever call controller function

Link to this answer
Share Copy Link

Contributed on May 11 2022

SAMER SAEID

0 Answers Avg Quality 2/10

How do I call a controller function after my object has loaded

Contents

More Related Answers

How do I call a controller function after my object has loaded

Closely Related Answers

How do I call a controller function after my object has loaded

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.