0

Planning to use UI Bootstrap. Trying to code controllers according to github community style guide .

I need to have elements of various class selectors flash red. I thought the best method would be add/remove a class that has a red background and white text - on a 500 ms loop.

Two things I cannot get working are:

  1. adding/removing a class (nothing happens)
  2. having any code in a $interval(function () { ... }, 500); loop (Breaks angularJS)

I injected '$interval' as a dependency to the controller - I think.

Couldn't quite see how to embed a Plunker so I have pasted my HTML below.

I put in a button to call controller code snippets and commented out the "dodgy" bits.

At the moment clicking the button causes the example box text to change - but not its appearance.

I am hoping my error is something subtle [and not that I cannot use UI Bootstrap with these two features].

Many thanks in advance.

The author has edited the code to reflect suggestions from Aleksey Solovey

$scope & $interval have been added to the parameters of function test_flash()

The call to interval at the end of function test_flash() has been uncommented

A ternary has been added to the class def of div #him [which now flashes]

I explained the need to maintain an array in the controller contining attribute values of many such divs so that the class def [or ng-class - better] can contain a function call: that would make such an element flash when an attribute had certain values.

<!doctype html>
<html lang="en">
<head>

    <title>Test Flash</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Angular.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <!-- animate - needed by ui bootstrap -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
    <!-- sanitize - needed by  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-sanitize.min.js"></script>
    <!-- ui bootstrap js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>

    <!-- ui bootstrap css -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        .item {
            border: 1px dotted black;
            padding: 10px 10px;
            margin-top: 30px;
            max-width: 80px;
        }
        .flash-on {
            background-color: red;
            color: White;
        }
    </style>

</head>
<body  ng-app="myApp">
    <div class="container">

        <div ng-controller="test_flash as tf">

            <div class="item {{tf.flashOn ? 'flash-on' : ''}}" id="him">
                {{tf.item}}
            </div>
            <button ng-click="tf.startFlashing()">Start</button>
        </div>

    </div>

    <script>

        // add dependencies needed for using ui bootstrap
        var app = angular.module( "myApp", ['ngAnimate', 'ngSanitize', 'ui.bootstrap'] ) ;


        // a controller to make box flash red

        app.controller("test_flash", test_flash ) ;


        test_flash.$inject[ '$scope' , '$interval' ] ;


        function test_flash( $scope , $interval ) {

            var th = this ; // avoids overuse of "this" 


            th.item = "shirts";

            th.flashOn = false;


            th.startFlashing = function() {


                // $interval(function () {


                    th.flashOn = !th.flashOn;

                    th.item = (th.flashOn)?"pants": "shirts";

                    if (th.flashOn) {

                        angular.element('#him').addClass("flash-on");

                    } else {

                        angular.element('#him').removeClass("flash-on");
                    }


                // }, 500);

            }


            $interval(function () {

                th.flashOn = !th.flashOn;

                th.item = (th.flashOn)?"pants": "shirts";

            }, 1000);

        }


    </script>

</body>

</html>
Cœur
  • 37,241
  • 25
  • 195
  • 267
rupertrealbear
  • 7
  • 3
  • 1
    you are injecting `'$scope' , '$interval'`, but you are not passing anything into the controller, add this: `function test_flash($scope, $interval) {` – Aleksey Solovey Apr 05 '18 at 13:24
  • Don't add the class, that's DOM manipulation that [you should be avoiding](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background), try switching class instead with `ng-class="tf.flashOn ? 'flash-on' : ''"` – Aleksey Solovey Apr 05 '18 at 13:29
  • I edited the parameters for function test_flash() and got $interval working! – rupertrealbear Apr 05 '18 at 13:49
  • @AlekseySolovey I was able to change the box appearance by inserting "{{tf.flashOn ? 'flash-on' : ''}}" into the class attribute. However, this fixes the element to flash permanently. I wanted to have elements flash where attribute "status" = 3, 6, or 9. I am intending to maintain/update data [eg an array] in the controller that includes the current value of attribute "status" so that a fn call in an expression [inside each element's class def] could return "flash-on" or "". Obviously, I need to investigate ng-class, but anyway, thanks very much for your timely reply – rupertrealbear Apr 05 '18 at 14:28
  • you can edit your question and add a Snippet, where if you paste your current code, it can be executed here on stackoverflow. Currently I'm not sure what changes you made, so I can't tell you why it's flashing. As for the different classes, try `ng-class="{'flash-on': element.status == 3}"` – Aleksey Solovey Apr 05 '18 at 14:39

0 Answers0