加载对象后如何调用控制器函数？

Question

我是 angularjs 的新手，所以这对你们很多人来说可能很明显...

我有一个带有“MainCtrl”控制器的“主”视图。控制器有一个“$scope.init()”函数，在初始化控制器时会调用该函数。但是，我在视图中有一个 iFrame 需要在“init”函数成功之前完成它的“onload”js 函数运行。

我尝试使用 iFrame 的 ngInit 触发“init”函数，但那发生在“onload”之前

请告诉我如何在 iFrame 的 onload="otherFunction" 完成后创建初始化函数运行？

Answer 1

在下面创建了一个演示，其中 ng-init="increaseCount()" 增加了 $scope.carCount 变量的值，但仅在加载 <iframe> 之后。

您可以通过单击按钮加载 <iframe> 并观察 $scope.carCount 的变化。

不确定这是否正确。

基本上，我的 INIT 函数中有 2 个函数，名为 increaseCount():

包含主要 INIT 逻辑的函数 increaseCount 即。增加汽车数量
一个函数 onIframeLoad 等待 iframe 加载，然后通过调用 increaseCount();

Interactive DEMO here或运行下面的代码↓↓↓

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";
  }
  
});

<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>

加载对象后如何调用控制器函数？

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

angularjs