Inject $element in angularjs Controller

Question

first, I have read millions of post saying you should not update DOM elements from a Controller in Angular. I know.

When trying to use angular-timer directive (a countdown). I faced some problems, so finally, with the plugin developer help, we did this plunker, which is working and meet my requirements.

http://plnkr.co/edit/CWXnKMbygVDMc8xzshZa?p=preview

However, when moving this code to my app, I got next error when I add the $element to my controller:

 `Error: Unknown provider: $elementProvider <- $element`

I have read many posts and I know it can be injected, but I don´t know why it´s not working in my app.

In the other hand, I like to do things right, so I don´t like to implement something that is a bad practice. So, if you have a better approach that works, please let me know.

Did you remember to register the timer module in your app? (var app = angular.module('lazy-timer', ['timer']). and add the angular-timer.min.js to your index.html? $element is not found at the moment. — Davin Tryon
– Davin Tryon, Commented Dec 20, 2013 at 14:10

charlietfl · Accepted Answer · 2013-12-20 14:53:36Z

Looks ugly parsing DOM with jQuery, and I don't understand why you don't use the timer directive within the ng-repeat.

Here's an approach that just adds and extra array to scope for eleapsedTimers which are then displayed using ng-repeat

 $scope.elapsedTimers=[];

$scope.$on('timer-stopped', function (data) {
    /* loop through bookings to find one that just stopped*/
    var now = new Date();
    angular.forEach($scope.bookingsList, function (item) {
        if (!item.elapsed) {
            if (item.booking_date <= now) {                  
                item.elapsed = true;
                $scope.$apply(function () {
                    $scope.elapsedTimers.push(item)
                });
            }
        }
    });
});

HTML

<div id="result">
  <div ng-repeat="item in elapsedTimers">ID {{item.id}} elapsed</div>
</div>

DEMO

Note...this will add a new property elapsed to the booking object. If this is a problem can create workaround

Collectives™ on Stack Overflow

Inject $element in angularjs Controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related