CODEWITHSUNDEEP
angularjsangular-ui-gridng-gridui-grid
Omsairam
Omsairam

Reputation: 370

ui-grid menu dropdown shows javascript code behind the buttons

Using Angular-UI-grid version 4.4.11 with Angular 1.8, And JQuery version is 3.6.0

But the dropdown in the grid menu header just show the Code behind the tag

enter image description here

And the Generated HTML is as:

<button type="button" class="ui-grid-menu-item ng-binding" ng-click="itemAction($event, title)" ng-show="itemShown()" ng-class="{ 'ui-grid-menu-item-active': active(), 'ui-grid-sr-only': (!focus &amp;&amp; screenReaderOnly) }" aria-pressed="false" tabindex="0" ng-focus="focus=true" ng-blur="focus=false">
<i ng-class="icon" aria-hidden="true" class="ui-grid-icon-sort-alt-up">&nbsp;</i>function(){return e.getSafeText("sort.ascending")}
</button>

Why it's happening like this?

Upvotes: 0

Views: 154

Answers (1)

Gerald LeRoy
Gerald LeRoy

Reputation: 1277

Here's a suggestion for you how you might make this work, which is to:

  1. place the function call in your view and

  2. define the function itself in your controller as shown below

(You'll want to place your view and controller in two separate files. I included everything in one file below just to display everything more clearly)

<!DOCTYPE html>

<html ng-app="myApp">
  <head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
  </head>
  <body ng-controller="MyController">

    <button type="button" 
            class="ui-grid-menu-item ng-binding"
            ng-click="itemAction($event, title)" 
            ng-show="itemShown()"
            ng-class="{ 'ui-grid-menu-item-active': active(), 'ui-grid-sr-only': (!focus &amp;&amp; screenReaderOnly) }" 
            aria-pressed="false" 
            tabindex="0" 
            ng-focus="focus=true" 
            ng-blur="focus=false">
            <i  ng-class="icon" 
                aria-hidden="true" 
                class="ui-grid-icon-sort-alt-up">&nbsp;</i>
            {{ safeTextFunc() }}  <-----------------------
    </button>

    <script>
      angular.module('myApp', []).
        controller('MyController', ['$scope',function($scope) {      
            $scope.safeTextFunc = function(){ <--------------------
                  return e.getSafeText("sort.ascending") <--------------------
            }

            // define e.getSafeText function here <--------------------
        }]
      );
    </script>  
  </body>
</html>

Upvotes: 0

Related Questions