ui-grid menu dropdown shows javascript code behind the buttons

134 Views Asked by Ajay Kumar Jaiswal At 07 February 2022 at 18:11

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

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?

Original Q&A

There are 1 best solutions below

Gerald LeRoy On 08 February 2022 at 03:36

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

place the function call in your view and
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>

ui-grid menu dropdown shows javascript code behind the buttons

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULAR-UI-GRID

Related Questions in NG-GRID

Related Questions in UI-GRID

Trending Questions

Popular # Hahtags

Popular Questions