Angular: Updating Scope on Hover

angular: updating scope on hover

You're on the right track. You can actually use the ngMouseenter and ngMouseleave directives to do this.

<span ng-mouseenter="show = true" ng-mouseleave="show = false">
  Mouse over me.
</span>

<div ng-show="show">Hello!</div>

Here's a working Plunker: http://plnkr.co/edit/Ro80nR7HT7OGGPCXjz7E?p=preview

@Swordfish0321 is also right - you can write a very simple directive to listen specifically for the hovering if you'd like, but it may not be necessary. We use mouseenter and mouseleave for tooltips in UI Bootstrap, for example.

Angular ng-mouseover update $scope variable

First of all you cannot write $scope inside HTML.

Instead to write ng-mouseover='$scope.txt = "{{ x.txt }}")'

should be something like:

ng-mouseover='txt=x.txt'

However it also will not work because you use ng-repeat

So the final solution is to use $parent

<img  ng-mouseover="$parent.txt = x.txt" ng-init="txt=''" src='{{ x.img }}'  alt='{{ x.txt }}'/>

Demo Plunker 1

---

Or you can call some method on ng-mouseover:

<img  ng-mouseover="foo(x.txt)" src='{{ x.img }}'  alt='{{ x.txt }}'/>

and:

$scope.foo = function(txt){
   $scope.txt = txt;
};

Demo Plunker 2

How to change the class using click and hovering

As suggested above, use ng-class with ng-mouseover and ng-mouseleave:

<div ng-class="class" ng-click="class='active'" ng-mouseover="class='hovering'" ng-mouseleave="class=''"></div>

This way, you'll have 3 event listener to a single variable (in a mutually exclusive way).

If you want to have both at the same time, use an array this way:

<div ng-class="[classClick, classHover]" ng-click="classClick='active'" ng-mouseover="classhover='hovering'" ng-mouseleave="classHover=''"></div>

Changing Element Colour on Hover AngularJS

There is no ng-hover directive. You'll want to use ng-mouseenter and ng-mouseleave.

Also, keep in mind that the syntax for ng-style is an object corresponding the CSS key-value pairs.

<li ng-repeat="i in persons" ng-style="personColour" ng-mouseenter="changeColor(i)"></li>

$scope.changeColor = function(person) {
    $scope.personColour = {color: '#'+person.colour};
};

If you'd like for the color to change back to what it was before you hovered, you can create two functions, or pass a parameter to $scope.changeColour:

<li ng-repeat="i in persons" ng-style="personColour" ng-mouseenter="changeColor(i,true)" ng-mouseleave="changeColor(i,false)"></li>

$scope.changeColor = function(person, bool) {
    if(bool === true) {
        $scope.personColour = {color: '#'+person.colour};
    } else if (bool === false) {
        $scope.personColour = {color: 'white'}; //or, whatever the original color is
    }
};

---

To take it a step further

You could create a directive for each person.

<person ng-repeat="i in persons"></person>

// your module, then...
.directive('person', [function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<li class="bigBox no_s"><a href="#/{{i.person_id}}">{{i.person_name}}</a></li>',
        link: function(scope, elm, attrs) {
            elm
                .on('mouseenter',function() {
                    elm.css('color','#'+i.colour);
                })
                .on('mouseleave',function() {
                    elm.css('color','white');
                });
        }
    };
}]);

How to change the class on one div while hovering over another div with AngularJS?

Change my-class to myclass (i.e. the dash causes problem).

<div ng-controller="Ctrl" ng-app>
    <div ng-class="myclass">This div will change class when one hovers over bottom DIV </div>
    <br/>
    <div class="hover-div" ng-mouseenter="myclass = 'highlight'" ng-mouseleave="myclass = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>    
</div>

Updated: the reason my-class isn't allowed in the expression is because AngularJS treats the dash as minus symbol and tries to parse it that way. Apparently, it can't parse the statement my - class = 'highlight'. Unfortunately, after reading AngularJS parser code, I can't find a way to "help" it distinguish between dash and minus.

Angular JS Change Class on ng-mouseover

I've used something like this with success:

<button
    ng-class="{'some-class':hovering}"
    ng-mouseenter="hovering=true"
    ng-mouseleave="hovering=false">Add and Optimize</button>

Entering and leaving the button toggles $scope.hovering, and the application of some-class is contingent on the $scope.hovering scope variable being true.

Change images on hover with AngularJS

Hey bro I had the same problem, and all I could think of doing was preloading the images. That helped alot. Add a small piece of js code which loads asynchronously at the beginning of your document. Like this for example:

var images = new Array()
  function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
      images[i] = new Image()
      images[i].src = preload.arguments[i]
    }
  }
  preload(
    // for (i = 0; i < $scope.members.length; i ++){
    //   return members[i].source + ",";
    // }
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image1.1.jpg",
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image2.1.jpg",
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image3.1.jpg",
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image4.1.jpg",
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image5.1.jpg",
    "http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image6.1.jpg"
  )

Angular scope variable update not reflected in UI

Two things need fixing...

1. Don't use string interpolation for your boolean showToolTip

   <span uib-tooltip="{{someName}}" tooltip-placement="right" 
         tooltip-enable="showToolTip">{{someNameShortened}}</span>
   

2. JavaScript variables / properties are case sensitive. In your getRepositoryList handler, you have $scope.showTooltip. It should be $scope.showToolTip (two capital "T"s)

Crappy Plunker demo ~ http://plnkr.co/edit/W7tgJmeQAJj0fmfT72PR?p=preview

Change class on mouseover and scroll dependent on offset

In your directive link function, you need to set the mouseenter and mouseleave event listeners on element, not angular.element.

So replace angular.element.on('mouseenter', ...) and angular.element.on('mouseleave', ...) with element.on('mouseenter', ...) and element.on('mouseleave', ...).

---

Related Topics