Esse plugin não tem pra angular, tem que utilizar jquery ou não (acho mais simples com jQuery
).
Exemplo minimo
var app = angular.module('app', []);
app.controller('ctrl', ['$scope',
function($scope) {
$scope.load = function() {
$("#myImage").load(function() {
$('#myImage').loadgo({
'opacity': 0.5,
'animated': true/*
'image': 'https://i.sstatic.net/7uk8G.png'*/,
'direction': 'bt'
});
}).each(function() {
if (this.complete) $(this).load();
});
};
$scope.go = function() {
var _time = window.setInterval(function() {
if ($('#myImage').loadgo('getprogress') == 100) {
$('#myImage').loadgo('setprogress', 0);
$("#btnExecutar").text('Executar');
$("#btnExecutar").prop('disabled', false);
window.clearInterval(_time);
} else {
var i = ($('#myImage').loadgo('getprogress') + 4);
$('#myImage').loadgo('setprogress', i);
$("#btnExecutar").text('Executando ...');
$("#btnExecutar").prop('disabled', true);
}
}, 150);
};
$scope.load();
//$scope.go(); // remover para funciona no inicio do carregamento
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/LoadGo/2.1/loadgo.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="app" ng-app="app" ng-controller="ctrl" style="width:100%">
<p style="margin-botton:150px; float:left">
<img id="myImage" style="width:300px" src="https://i.sstatic.net/0sLfb.png" border="0" />
</p>
<button id="btnExecutar" ng-click="go()">Executar</button>
</div>
Nesse exemplo foi utilizado um botão, mas, no final do script
tem um comentário é só descomentar (//$scope.go();
) que isso funcionará no carregamento da página. As imagens também me parecem diferentes n
Referencia: LoadGo