topic Re: Mashup with angular js css animations in Integration, Extension & APIs

Mashup with angular js css animations

paoloderegibus — Mon, 30 Oct 2017 09:25:36 GMT

Hello community,

I am developing a mashup using angular-js.

Some elements of the page are hidden and shown using ng-hide/ng-show/ng-if. I have recently added to these elements some animations using angular standard css classes you can use with each of the directive I mentioned.

Everything worked fine with June2017 release, but animations do not work with Septemeber2017 release.

I have attached a very simple mashup as an example. Also in this case everything is fine with Jun2017 release, but animations do not work (the element controlled by ng-if just appears and disappear) with Sep2017 release.

If anybody found and solved this issue or if anybody knows what has been changed from Jun2017 to Sep2017 it would be much appriciated.

Thanks

Paolo

Re: Mashup with angular js css animations

_jespers_ — Tue, 31 Oct 2017 08:31:06 GMT

Hi,

I have done some changes to your code and was able to make it work.

Updates to animazioni.js:

require( ["js/qlik"], function ( qlik ) {
    qlik.setOnError( function ( error ) {
        alert( error.message );
    } );
   
    qlik.setOnError( function ( error ) {
        $( "#errmsg" ).html( error.message ).parent().show();
    } );
    //callbacks -- inserted here --
    //open apps -- inserted here --

    angular.bootstrap( document, ["myApp", "qlik-angular"] );
   
    //get objects -- inserted here --
    //create cubes and lists -- inserted here --
} );

Updates to <STYLE> in animazioni.html:

<style>
.animate-if {
  background:white;
  border:1px solid black;
  height:100px;
}

.animate-if.ng-enter, .animate-if.ng-leave {
  transition:all linear 1s;
}

.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
  opacity:0;
  height:0px;
}

.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
  opacity:1;
  height:100px;
}
</style>

Updates to <BODY> in animazioni.html:

<div ng-app="myApp" ng-controller="ctrl" class="ng-scope">
  <h1>Show the DIV: <input type="checkbox" ng-model="myCheck"></h1>
  <div id="my-div" class="animate-if" ng-model="checked" ng-init="checked=true" ng-click="hide()" ng-if="myCheck">PROVA ANIMAZIONE</div>
</div>

<script type="text/javascript">
        angular.module('myApp', ['ngAnimate']).
        controller('ctrl', function(){});
</script>

Re: Mashup with angular js css animations

paoloderegibus — Mon, 06 Nov 2017 16:21:26 GMT

Hi Jasper,

thanks for the suggestion, I have checked and it effectively works.

On the other hand I would like to keep the same application structure as it is in the file I provided: wihtout having to declare a new ng-app in the html. Do you think it would be possible?

This small app I provided was just an example: the real issue happened on much bigger application that was not possible to share and on which I am not able to use this solution.

The thing that really surprised me was that until June2017 release everything worked fine (included animations) and I can't understand what has changed in September2017 release.

Any suggestion will be very appreciated.

Thanks

Paolo