'Javascript not working when use AngularJS ui-view

I have a main template (index.html) with an AngularJS ui-view. Inside this main template I import a bunch of Javascript files. I use AdminLTE 3.2 template for my AngularJS app (https://github.com/ColorlibHQ/AdminLTE/releases). When I click Products nav-item, it not showing nav-treeview item.

The ui-view content loads just fine.
If I copy/paste the content of baseView.html directly into index.html, everything works as expected.

What am I missing?

Views/Admin/index.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="~/Assets/admin/libs/font-awesome/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="~/Assets/admin/css/adminlte.min.css">
    <link href="~/Assets/admin/css/custom.css" rel="stylesheet" />
</head>
<body class="hold-transition sidebar-mini" ng-app="tedushop" ng-controller="rootController">
    <!-- Site wrapper -->
    <div ui-view></div>
    <!-- ./wrapper -->
    <!-- jQuery -->
    <script src="~/Assets/admin/libs/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="~/Assets/admin/libs/bootstrap/js/bootstrap.bundle.js"></script>
    <!-- AdminLTE JS -->
    <script src="~/Assets/admin/js/adminlte.js"></script>
    <!-- Begin embed angularJS -->
    <script src="~/Assets/admin/libs/angular.js/angular.js"></script>
    <script src="~/Assets/admin/libs/angular-ui-router/angular-ui-router.js"></script>
    <script src="~/app/app.js"></script>
    <script src="~/app/components/home/rootController.js"></script>
    <script src="~/app/components/home/homeController.js"></script>
</body>
</html>

app.js

(function () {
    angular.module('tedushop',
        ['ui.router'])
        .config(config);

    config.$inject = ['$stateProvider', '$urlRouterProvider'];

    function config($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('base', {
                url: '',
                templateUrl: '/app/shared/views/baseView.html',
                abstract: true
            })
            .state('home', {
                url: '/admin',
                parent: 'base',
                templateUrl: '/app/components/home/homeView.html',
                controller: 'homeController'
            });
        $urlRouterProvider.otherwise('/admin');
    };
})();

app/components/views/baseView.html

<div class="wrapper">
    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link">
            <img src="/Assets/admin/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
            <span class="brand-text font-weight-light">AdminLTE 3</span>
        </a>
        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <li class="nav-item">
                        <a href="javascript:void(0);" class="nav-link">
                            <i class="nav-icon fas fa-chart-pie"></i>
                            <p>
                                Products
                                <i class="right fas fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a ui-sref="product_categories" class="nav-link">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>List of products</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a ui-sref="products" class="nav-link">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Products</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <div ui-view></div>
    </div>
    <!-- /.content-wrapper -->
</div>

adminlte.js

/**
 * --------------------------------------------
 * AdminLTE Treeview.js
 * License MIT
 * --------------------------------------------
 */
/**
 * Constants
 * ====================================================
 */

var NAME = 'Treeview';
var DATA_KEY = 'lte.treeview';
var EVENT_KEY = "." + DATA_KEY;
var JQUERY_NO_CONFLICT = $__default["default"].fn[NAME];
var EVENT_EXPANDED = "expanded" + EVENT_KEY;
var EVENT_COLLAPSED = "collapsed" + EVENT_KEY;
var EVENT_LOAD_DATA_API = "load" + EVENT_KEY;
var SELECTOR_LI = '.nav-item';
var SELECTOR_LINK = '.nav-link';
var SELECTOR_TREEVIEW_MENU = '.nav-treeview';
var SELECTOR_OPEN = '.menu-open';
var SELECTOR_DATA_WIDGET = '[data-widget="treeview"]';
var CLASS_NAME_OPEN = 'menu-open';
var CLASS_NAME_IS_OPENING = 'menu-is-opening';
var CLASS_NAME_SIDEBAR_COLLAPSED = 'sidebar-collapse';
var Default = {
    trigger: SELECTOR_DATA_WIDGET + " " + SELECTOR_LINK,
    animationSpeed: 300,
    accordion: true,
    expandSidebar: false,
    sidebarButtonSelector: '[data-widget="pushmenu"]'
};
/**
 * Class Definition
 * ====================================================
 */

var Treeview = /*#__PURE__*/function () {
    function Treeview(element, config) {
        this._config = config;
        this._element = element;
    } // Public


    var _proto = Treeview.prototype;

    _proto.init = function init() {
        $__default["default"]("" + SELECTOR_LI + SELECTOR_OPEN + " " + SELECTOR_TREEVIEW_MENU + SELECTOR_OPEN).css('display', 'block');

        this._setupListeners();
    };

    _proto.expand = function expand(treeviewMenu, parentLi) {
        var _this = this;

        var expandedEvent = $__default["default"].Event(EVENT_EXPANDED);

        if (this._config.accordion) {
            var openMenuLi = parentLi.siblings(SELECTOR_OPEN).first();
            var openTreeview = openMenuLi.find(SELECTOR_TREEVIEW_MENU).first();
            this.collapse(openTreeview, openMenuLi);
        }

        parentLi.addClass(CLASS_NAME_IS_OPENING);
        treeviewMenu.stop().slideDown(this._config.animationSpeed, function () {
            parentLi.addClass(CLASS_NAME_OPEN);
            $__default["default"](_this._element).trigger(expandedEvent);
        });

        if (this._config.expandSidebar) {
            this._expandSidebar();
        }
    };

    _proto.collapse = function collapse(treeviewMenu, parentLi) {
        var _this2 = this;

        var collapsedEvent = $__default["default"].Event(EVENT_COLLAPSED);
        parentLi.removeClass(CLASS_NAME_IS_OPENING + " " + CLASS_NAME_OPEN);
        treeviewMenu.stop().slideUp(this._config.animationSpeed, function () {
            $__default["default"](_this2._element).trigger(collapsedEvent);
            treeviewMenu.find(SELECTOR_OPEN + " > " + SELECTOR_TREEVIEW_MENU).slideUp();
            treeviewMenu.find(SELECTOR_OPEN).removeClass(CLASS_NAME_IS_OPENING + " " + CLASS_NAME_OPEN);
        });
    };

    _proto.toggle = function toggle(event) {
        var $relativeTarget = $__default["default"](event.currentTarget);
        var $parent = $relativeTarget.parent();
        var treeviewMenu = $parent.find("> " + SELECTOR_TREEVIEW_MENU);

        if (!treeviewMenu.is(SELECTOR_TREEVIEW_MENU)) {
            if (!$parent.is(SELECTOR_LI)) {
                treeviewMenu = $parent.parent().find("> " + SELECTOR_TREEVIEW_MENU);
            }

            if (!treeviewMenu.is(SELECTOR_TREEVIEW_MENU)) {
                return;
            }
        }

        event.preventDefault();
        var parentLi = $relativeTarget.parents(SELECTOR_LI).first();
        var isOpen = parentLi.hasClass(CLASS_NAME_OPEN);

        if (isOpen) {
            this.collapse($__default["default"](treeviewMenu), parentLi);
        } else {
            this.expand($__default["default"](treeviewMenu), parentLi);
        }
    } // Private
        ;

    _proto._setupListeners = function _setupListeners() {
        var _this3 = this;

        var elementId = this._element.attr('id') !== undefined ? "#" + this._element.attr('id') : '';
        $__default["default"](document).on('click', "" + elementId + this._config.trigger, function (event) {
            _this3.toggle(event);
        });
    };

    _proto._expandSidebar = function _expandSidebar() {
        if ($__default["default"]('body').hasClass(CLASS_NAME_SIDEBAR_COLLAPSED)) {
            $__default["default"](this._config.sidebarButtonSelector).PushMenu('expand');
        }
    } // Static
        ;

    Treeview._jQueryInterface = function _jQueryInterface(config) {
        return this.each(function () {
            var data = $__default["default"](this).data(DATA_KEY);

            var _options = $__default["default"].extend({}, Default, $__default["default"](this).data());

            if (!data) {
                data = new Treeview($__default["default"](this), _options);
                $__default["default"](this).data(DATA_KEY, data);
            }

            if (config === 'init') {
                data[config]();
            }
        });
    };

    return Treeview;
}();
/**
 * Data API
 * ====================================================
 */


$__default["default"](window).on(EVENT_LOAD_DATA_API, function () {
    $__default["default"](SELECTOR_DATA_WIDGET).each(function () {
        Treeview._jQueryInterface.call($__default["default"](this), 'init');
    });
});
/**
 * jQuery API
 * ====================================================
 */

$__default["default"].fn[NAME] = Treeview._jQueryInterface;
$__default["default"].fn[NAME].Constructor = Treeview;

$__default["default"].fn[NAME].noConflict = function () {
    $__default["default"].fn[NAME] = JQUERY_NO_CONFLICT;
    return Treeview._jQueryInterface;
};

exports.Treeview = Treeview;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Javascript not working when use AngularJS ui-view

Sources

Related Questions