Question

I have a simple form that I want to be shown on a button click. i.e a button says “Add new User”, then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
The first problem i am facing is:
using this code

function AngularUI($scope, $window) {


    $scope.collapse = function (selector) {
        angular.element(selector).collapse();
    }
}  

and

<div class="ang-ui-test">
    <button ng-click="collapse('#collapsible')">
        using angular.element
    </button>

    <div id="collapsible" class="collapse">
        some thing in here ...... !
    </div>


    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
        simple collapsible
    </button>

    <div id="demo" class="collapse in">This one work properly</div>
</div> 

the second one that does not uses angular.element.collapse works properly.

The second problem is : how do I test the behavior mentioned above.

on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown.
( i.e a button says “Add new User”, then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.

thanks in advance.

Answer 1

You’re doing it wrong. It’s bad juju to do DOM manipulations in the controller because you are trying to look for / manipulate the DOM before it had a chance to render/refresh/update. Think of all the JS in the controller being executed in it’s own phase, and THEN all the HTML is updated to reflect the final model state.

Try using ng-class="{collapse:someBoolExpression}"

You could also take a look at ui-hide, ui-show and ui-toggle (from AngularUI, but I think we should probably add a ticket to let you customize the class used.

Try to get the mindset of doing DOM manipulation manually out of your head. It takes a while, but once you get used to it your development speed picks up exponentially. When you finally hit a wall where Angular can’t already do the job for you, start reading up on directives and checkout AngularUI’s source code for some good, commented examples.