md-tooltip's md-visible causes $compile:nonassign on mouse wheel scrolling

[smithgt]

Actual Behavior:

• What is the issue? *
  Angular throws $compile:nonassign errors related to the md-visible attribute of md-tooltip when the user scrolls via mouse wheel, arrow keys, or page up/down. The tooltips still appear as expected, even though the error is printed to the console. Scrolling via scrollbar thumb or scrollbar arrows works without errors.
• What is the expected behavior?
  No errors in the console.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  http://codepen.io/anon/pen/ozygQR
• Details:
• Hover over buttons: all is well.
• Scroll using the up/down arrows of the scroll bar and then hover over buttons: all is well.
• Scroll by dragging the scroll bar thumb and then hover over buttons: all is well.
• Scroll by using the mouse wheel (or arrow keys or page up/down) while the mouse is hovering over a button: tooltips appear as expected, but I see the stack trace (listed below) printed several times in the console.

Angular Versions: *

• Angular Version: 1.5.5, 1.5.8
• Angular Material Version: 1.1.0, 1.1.1

Additional Information:

• Browser Type: * Firefox, Chrome
• Browser Version: * FF 45.4.0, Chrome 53.0.2785
• OS: * Windows 7, CentOS 6
• Stack Traces:
  "Error: [$compile:nonassign] Expression 'vm.hoverItem==item' in attribute 'mdVisible' used with directive 'mdTooltip' is non-assignable!
  http://errors.angularjs.org/1.5.5/$compile/nonassign?p0=vm.hoverItem%3D%3Ditem&p1=mdVisible&p2=mdTooltip
  minErr/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:68:12
  initializeBinding/parentSet<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:9757:1
  parentValueWatch@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:9770:19
  regularInterceptedExpression@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:15623:16
  $RootScopeProvider/this.$get</Scope.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:17064:34
  o@https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js:7:14976
  timeout/timeoutId<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:19157:28
  completeOutstandingRequest@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:5869:7
  Browser/self.defer/timeoutId<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:6145:7
  "

[crisbeto]

@smithgt it's throwing the error in this case, because you have a comparison operator in md-visible (vm.hoverItem==item). That attribute uses a two-way binding and is supposed to contain an expression. What are you trying to achieve with this setup so I can see if it can be worked around?

[smithgt]

@crisbeto the weird thing is that it is only throwing on mouse wheel move, not on other methods of scrolling.

The provided codepen is a super simplified case to demonstrate the inconsistent throwing of the error.

My use case is that I have a md-list and each md-list-item has an ng-click attribute (thus turning the item into an md-button upon rendering). Each md-list-item contains a <p> element for text, a md-tooltip (to describe the text), and two secondary md-buttons (each having their own md-tooltip).

Since I want a tooltip on the clickable md-list-item I tried the position:relative;z-index:1 fix mentioned in #8946 but that makes the <p> element no longer clickable. (example codepen: http://codepen.io/anon/pen/YGjzPk)

The only way I've been able to figure out how to use md-list-item with having .item-tooltip show/hide correctly is by binding md-visible="vm.hoverItem==item", even though errors are sometimes thrown: http://codepen.io/anon/pen/mAjdRp

[crisbeto]

Sorry for the delayed response @smithgt. I took another look at it and what's even weirder is that we have the mdVisible property set as an optional binding which should silence errors like this.

[crisbeto]

I'll close this since it's not the proper way of using two-way bindings. @smithgt if your app is using Angular >= 1.5, you can work around this by decorating the tooltip to use a one-way binding. You need to throw this somewhere in your code:

angular.module('ngMaterial').config(['$provide', function($provide){
  $provide.decorator('mdTooltipDirective', ['$delegate', function($delegate) {
    $delegate[0].scope.visible = '<?mdVisible';
    return $delegate;
  }]);
}]);

We can't apply this directly to Material, because we still support down to Angular 1.3. Let me know if this does the trick.

[smithgt]

@crisbeto That works well. Thanks!

[ThomasBurleson]

@crisbeto - nice!

[0101adm]

@crisbeto 's fix no longer works in AM 1.1.4 using Angular 1.5.11.