Angular: DOM Manipulation in $uibModal

Question

I am creating modal dialog with UI Bootstrap for Angular, this is the HTML template for the modal:

<div class="modal-content">
  <div class="modal-body">
      ...
  </div>
  <div class="modal-footer">
      <button class="btn btn-primary" ng-click="save();">Save</button>
  </div>
</div>

And this is the controller for the modal directive:

app.controller('modalCtrl', [
    '$scope', function ($scope) {
        return $scope.save = function () {
            ...
        };
    }
]);

Calling it with this:

$uibModal.open({
    templateUrl: '...',
    controller: 'modalCtrl'
});

When the save button clicked, I need change the button styling / animation using another 3rd party library which basically is something like this:

button.loading();

What is the ideal way to do this? I know many people say directive is the way to do DOM manipulation, but how can we do it in here?

Answer 1

I think you could try this:

HTML add a specific class to element:

<button class="btn btn-primary thebutton" ng-click="save();">Save</button>

JS get the element:

$scope.save = function () {
   angular.element('thebutton').loading();
};

If you want to use a directive:

HTML:

<button thebutton class="btn btn-primary" ng-click="save();">Save</button>

JS:

.directive('thebutton', function() {
    return {
        link: function(scope, element, attrs) {
            element.on('click', function () {
                element.loading();
            });
        }
    };
});