Не удается заставить работать маршрутизатор пользовательского интерфейса в моем Angular Framework

У меня есть фреймворк, который должен быть несовместим с маршрутизатором, и, хотя я получил его для работы с ngRoute, я не могу в своей жизни заставить его работать с UI Router

Основной модуль приложения выглядит следующим образом:

 (function () {
"use strict";

angular.module("app", ["ptFramework", "ui.router", "ngStorage", "ui.bootstrap"]);
})();

Структура построена на трех модулях с использованием пользовательских директив, первый модуль является фрейм-модулем

Вот модуль:

 (function () {
"use strict";
angular.module("ptFramework", [,"ptMenu", "ptDashboard"]);
})();

Модуль, с которым у меня возникают проблемы, - это модуль меню. Ниже находится модуль меню:

 (function () {
"use strict";

angular.module("ptMenu", ["ngAnimate"]);
 })();

В index.html я включил настраиваемую директиву, которая выглядит примерно так: HTML:

  <pt-menu>
                <pt-menu-item label="Dasboard" icon="fa-tachometer" state="dashboard"></pt-menu-item>
                <pt-menu-group label="Patients" icon="fa-users">
                    <pt-menu-item label="Patients" icon="fa-users" state="patient"></pt-menu-item>
                    <pt-menu-item label="Enter Results" icon="fa-area-chart" state="enterresults"></pt-menu-item>
                    <pt-menu-item label="View Results" icon="fa-area-chart" state="viewresults"></pt-menu-item>
                </pt-menu-group>
                <pt-menu-group label="Providers" icon="fa-user-md">
                    <pt-menu-item label="Providers" icon="fa-user-md" state="provider"></pt-menu-item>
                    <pt-menu-item label="Injury Dict." icon="fa-book" state="injurydictionary"></pt-menu-item>
                    <pt-menu-item label="Excercise Dict." icon="fa-book" state="excercisedictionary"></pt-menu-item>
                </pt-menu-group>
                <pt-menu-group label="Therapist" icon="fa-user-md">
                    <pt-menu-item label="Therapist" icon="fa-user-md" state="therapist"></pt-menu-item>
                    <pt-menu-item label="Program Entry" icon="fa-user-md" state="programentry"></pt-menu-item>
                    <pt-menu-item label="Results" icon="fa-area-chart" state="results"></pt-menu-item>
                    <pt-menu-item label="Excercises" icon="fa-bicycle" state="excercise"></pt-menu-item>
                </pt-menu-group>
            </pt-menu>

Вот директива для пункта меню:

 (function () {
"use strict";

angular.module('ptMenu').directive('ptMenuItem', function () {
    return {
        require: '^ptMenu',
        scope: {
            label: '@',
            icon: '@',
            state: '@'
        },
        templateUrl: 'ext-modules/ptMenu/ptMenuItemTemplate.html',
        link: function (scope, el, attr, ctrl) {

            scope.isActive = function () {
                return el === ctrl.getActiveElement();
            };

            scope.isVertical = function () {
                return ctrl.isVertical() || el.parents('.pt-subitem-section').length > 0;
            }

            el.on('click', function (evt) {
                evt.stopPropagation();
                evt.preventDefault();
                scope.$apply(function () {
                    ctrl.setActiveElement(el);
                    ctrl.setState(scope.state);
                });
            });
        }
    };
});
})();

Как вы можете видеть, у меня есть состояние в директиве, так что я могу использовать его в своей маркировке. Существует событие el.onclick, вызывающее функцию setState родительских контроллеров. Этот контроллер находится здесь: ptMenuController:

(function () {
"use strict";

angular.module('ptMenu').controller('ptMenuController',
['$scope', '$rootScope',
    function ($scope, $rootScope) {

        $scope.isVertical = true;
        $scope.openMenuScope = null;
        $scope.showMenu = true;
        $scope.allowHorizontalToggle = true;

        this.getActiveElement = function () {
            return $scope.activeElement;
        };

        this.setActiveElement = function (el) {
            $scope.activeElement = el;
        };

        this.isVertical = function () {
            return $scope.isVertical;
        }

        this.setState = function (state) {
            $rootScope.$broadcast('pt-menu-item-selected-event',
                { state: state });
        };

Это передается следующему контроллеру в цепочке, который является контроллером структуры. Рамочный контроллер:

 (function () {
"use strict";

angular.module("ptFramework").controller("ptFrameworkController",
['$scope', '$window', '$timeout', '$rootScope', '$state',
    function ($scope, $window, $timeout, $rootScope, $state) {

        $scope.isMenuVisible = true;
        $scope.isMenuButtonVisible = true;
        $scope.isMenuVertical = true;

        $scope.$on('pt-menu-item-selected-event', function (evt, data) {
            $scope.stateString = data.state;
            $state.go(data.state);
            checkWidth();
            broadcastMenuState();
        });

Это сообщение доходит до конца с правильным состоянием, но оно жалуется на мой контроллер, и когда я комментирую контроллер, я не вижу никакого представления

Вот файл конфигурации маршрута

 (function () {
"use strict";
angular.module('app').config([
    '$stateProvider', "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state("dashboard", {
                url: "/dashboard",
                template: "<pta-dashboard></pta-dashboard>"
            })
            .state("patient", {
                url: "/patient",
                temlateUrl: "app/patient/patientViewTemplate.html",
               controller: "patientController"
            })
            .state("enterresults", {
                url: "/enterresults",
                templateUrl: "app/patient/enterResultsTemplate.html",
                controller: "patientController"
            })
            .state("viewresults", {
                url: "/viewresults",
                templateUrl: "app/patient/viewResultsTemplate.html",
                controller: "patientController"
            })
            .state("provider", {
                url: "/provider",
                templateUrl: "app/provider/providerVierTemplate.html",
                controller: "providerController"
            })
            .state("injurydictionary", {
                url: "/injurydictionary",
                templateUrl: "app/provider/injuryDictionaryTemplate,html",
                controller: "providerController"
            })
            .state("excercisedictionary", {
                url: "/excercisedictionary",
                templateUrl: "app/provider/excerciseDictionaryTemplate.html",
                controller: "providerController"
            })
            .state("therapist", {
                url: "/therapist",
                templateUrl: "app/therapist/therapistViewTemplate.html",
                controller: "therapistController"
            })
            .state("programentry", {
                url: "/programentry",
                templateUrl: "app/therapist/programEntryTemplate.html",
                controller: "therapistController"
            })
            .state("results", {
                url: "/results",
                templateUrl: "app/results/resultsViewTemplate.html",
                controller: "resultsController"
            })
            .state("excercise", {
                url: "/excercise",
                templateUrl: "app/excercise/excerciseViewTemplate.html",
                controller: "excerciseController"
            })
            .state("programs", {
                url: "/programs",
                templateUrl: "app/programs/programsViewTemplate.html",
                controller: "programsController"
            });

        $urlRouterProvider.otherwise( "/dashboard");


    }
]);

 })();

Я в тупике, как и все, с кем я разговаривал. Я успешно выполнил эту работу с ngRoute. Я должен также получить мою директиву, которая должна появиться. У меня есть ui-sref на месте в frameworkTemplate.html

 <div class="pt-title-bar">
<div class="row">
    <div class="pt-logo-area col-sm-6">
        <img class="pt-icon" ng-src="{{ iconFile }}" />
        <div class="pt-title-area">
            <p class="pt-logo-title">{{ title }}</p>
            <p class="pt-logo-subtitle">{{ subtitle }}</p>
        </div>

        <div ng-if="isMenuButtonVisible" ng-click="menuButtonClicked()"
             class="pt-collapsed-menu pull-right">
            <button type="button" class="btn pt-nav-button">
                <i class="fa fa-bars"></i>
            </button>
        </div>

    </div>

    <div class="pt-right-side-controls col-sm-6">
        <pt-user-profile-small></pt-user-profile-small>
    </div>
</div>

Любые мысли или ввод будут оценены, я готов отказаться от трансляции все вместе и перейти к ui-srefs в index.html. Но это похоже на отказ.

Спасибо, Джон