AngularJS error with Kendo UI, have to support IE8

Question

I'm just trying to get a basic app to load at this point. I have to use AngularJS v1.2.27 and have to support IE8(I know, save the screaming for later.)

I have searched for a long time. I can't be the first person to have this issue.

Here is the error: "Unhandled exception at line54, column 11462 in http://localhost:61919/js/kendo.all.min.js

Object doesn't support this property or method"

Here is the code:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <h1>Hello</h1>
    <div xmlns:ng="http://angularjs.org" id="ng-app" ng-app="sample.app">
        <div ui-view></div>
    </div>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
    <script src="/js/kendo.all.min.js"></script>


    <script type="text/javascript">
        angular.module('sample.app', ['sample.controllers','kendo.directives'])
            .config(function ($stateProvider, $urlRouterProvider) {
                $urlRouterProvider.otherwise('/');
                $stateProvider.state('home', {
                    url: '/',
                    templateUrl: 'tpl/home.html',
                    title: 'Home'
                });
            });

        angular.module('sample.controllers', [])
            .controller("homeCtrl", ['$scope', '$http', '$state', function ($scope, $http, $state) {
                $scope.stateName = $state.current.title;
            }]);

        angular.module("tpl/home.html", []).run(["$templateCache", function ($templateCache) {
            $templateCache.put("tpl/home.html",
            "<div class=\"container-fluid\" ng-controller=\"homeCtrl\">" +
            "    <div class=\"container-fluid\">" +
            "        {{stateName}}" +
            "    </div>" +
            "</div>" +
            "" +
            "");
        }]);


    </script>
</body>
</html>

I found the issue. I needed to add the "indexOf" javascript helper. — Chad, May 07 '15 at 11:53

score 0 · Answer 1 · edited May 23 '17 at 11:58

I found the issue. I needed to add the "indexOf" javascript helper found here,

Why doesn't indexOf work on an array IE8?

    if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (elt /*, from*/) {
        var len = this.length >>> 0;

        var from = Number(arguments[1]) || 0;
        from = (from < 0)
             ? Math.ceil(from)
             : Math.floor(from);
        if (from < 0)
            from += len;

        for (; from < len; from++) {
            if (from in this &&
                this[from] === elt)
                return from;
        }
        return -1;
    };
}

AngularJS error with Kendo UI, have to support IE8

1 Answers1