0
我有一个框架，应该是路由器不可知的，虽然我已经得到它与ngRoute一起工作，但我不能让我的生活得到它与UI的工作路由器无法让UI路由器在我的Angular Framework中工作
主要应用模块如下所示：
(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成功完成了这项工作。我也应该让我的指示也应该显示出来。我有我的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-S参考，我准备放弃所有广播一起并转到index.html中的ui-srefs。但那感觉就像放弃了。
感谢， 约翰