jquery.appear plugin doesn't work when the element appears

Question

Ok, I am a little... confused by this plugin.. I added the script at the end of the body

<body>
    <div id="first"> 
          //a lot of text
    </div>
    <div id="second">
         //more text
    </div>
    <div id="leo">
        //here is where the plugin should work
    </div>
</body>
<script src="js/jquery.appear.js"></script>
</html>

this is what I have in the js file

app.controller('comparativaCtrl', function ($scope, $rootScope, $routeParams, $location, $http, Data) 
{
    $('#leo').appear();
      $(document.body).on("appear", "#leo", function() {
        alert("al fin");
    });
});

However, nothing happens... I checked and I have jquery, and besides it, this doesn't require dependencies as far as I know.... Notice that the app.controller is used because my js code is in the controller of a partial (I am using Angular). If anyone has any idea of why this isn't working please let me know

You should create a wrapper directive to use the plugin – Satpal Jul 22 '16 at 13:42 — Satpal, Jul 22 '16 at 13:42

score 1 · Answer 1 · answered Jul 22 '16 at 15:19

Create a new directives.js and add all your jquery function there. In your .cshtml file, just give the name of the directive. Ex: customdirective.js

angular.module('directiveName', []).directive('appear', ['$window', function ($window) {
    return function (scope, element, attr) {
        var wndw = angular.element($window);
        scope.initAppear = function () {
//your code
    }
}]);

Flower.cshtml:

<body>
    <div id="first"> 
          //a lot of text
    </div>
    <div id="second">
         //more text
    </div>
    <div id="leo" appear>
        //here is where the plugin should work
    </div>
</body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 12:02

You should always do the DOM manipulation in a directive, Here is an exampleto create and use it.

app.directive('appearWrapper', [
    function() {
        return {
            restrict: "A",
            link: function(scope, element, attrs) {
                $(element)
                    .appear()
                    .on('appear', function() {
                        //Do the needful
                    });

            }
        };
    }
]);

Usage

<div appear-wrapper>
    //here is where the plugin should work
</div>

A good article jQuery Plugin in an Angular App and "Thinking in AngularJS" if I have a jQuery background?

jquery.appear plugin doesn't work when the element appears

2 Answers2