我正在尝试弄清楚如何使用AngularJS，即使经过一些阅读，我仍然认为我弄错了。
我有一些需要加载的 UI 值以及一些我想要定义的按钮的默认行为。
我使用了以下代码：
var webAdmin = angular.module('webAdmin', ['ngRoute', 'ngResource'])
.config([
'$routeProvider', '$locationProvider', function($routeProvider, $locationProvider, dataStore) {
$locationProvider.html5Mode(false);
$routeProvider
.when('/', { templateUrl: '/app/views/dashboard.html', controller: 'DashboardController' })
.otherwise({ redirectTo: '/' });
}
]) // end config
.run([
function() {
}
]); // end run
webAdmin
.controller('sidebarMenuController', function($scope, $element) {
$scope.collapseSidebar = function() {
$element.parent().parent().toggleClass('sidebar-collapsed');
}
var lis = $element[0].querySelectorAll('#main-menu > li.has-sub');
for (var i = 0, l = lis.length; i < l; ++i) {
var li = lis[i];
var ul = angular.element(li.querySelector('ul'));
var el = angular.element(li.querySelector('a'));
el.bind('click', function(e) {
angular.element(li).toggleClass('opened');
ul.toggleClass('visible');
});
}
});
如您所见，我在控制器中应用了默认按钮行为，但我有一种感觉，这是错误的地方，是吗？
另外，我将在哪里加载我的 UI 值？ UI 值是"全局"的(在应用中使用，许多控制器应该能够访问它。例如，我计划动态加载菜单项(基于用户权限(，我应该在哪里加载它们？
编辑：
加载 UI 值：通过使用$resource或$http加载外部 json如果代码中不清楚，我需要菜单和类似功能的折叠按钮。
编辑2：该 HTML：
<div class="sidebar-menu" ng-controller="sidebarMenuController">
<header class="logo-env">
<!-- logo -->
<div class="logo">
<a href="#">
<img src="/images/logo.png" alt="" width="160" height="50">
</a>
</div>
<!-- logo collapse icon -->
<div class="sidebar-collapse">
<a href="#" ng-click="collapseSidebar()" class="sidebar-collapse-icon">
<i class="fa fa-navicon"></i>
</a>
</div>
<!-- open/close menu icon (do not remove if you want to enable menu on mobile devices) -->
<div class="sidebar-mobile-menu visible-xs">
<a href="#">
<i class="fa fa-navicon"></i>
</a>
</div>
</header>
<ul id="main-menu">
<li id="search">
<input type="text" name="q" class="search-input" placeholder="Search...">
<button type="button" ng-click="searchClick()"><i class="fa fa-search"></i></button>
</li>
<li class="has-sub">
<a href="/"><i class="fa fa-bar-chart"></i><span>Reports</span></a>
<ul>
<li><a href="#"><i class="fa fa-bar-chart"></i><span>New Report</span></a></li>
<li>
<a href="#"><i class="fa fa-folder-open"></i><span>Open Report</span></a>
</li>
<li>
<a href="#"><i class="fa fa-save"></i><span>Save Report</span></a>
</li>
</ul>
</li>
</ul>
<div class="logo-vert hidden-xs"><a href="#"><img src="/images/logo.png"></a></div>
</div>
按要求链接
：普伦克链接
您的代码看起来可以从本指南开始。以下是我的一些提示：
调整视图并上行 DOM 树
基于用户交互更新视图时，几乎不需要使用 jQueryLite 函数(在您自己的指令定义之外(。此外，为了保持代码模块化，您不应该从控制器的$element中沿着 DOM 树向上走。因此，如果您想实现侧边栏切换，您可以这样做：
- 在外部作用域上定义
sidebar.isVisible(以便从需要调整的元素中可以看到它(， -
使用
ng-show指令根据您的变量显示/隐藏侧边栏，以及<div class="sidebar" ng-show="sidebar.isVisible">...</div> -
仅从内部作用域更改该变量的值。
$scope.collapseSidebar = function () { $scope.sidebar.isVisible = false; };
绑定事件处理程序
绑定事件处理程序时，如果可以帮助，请不要使用jQueryLite函数，例如 .bind() 。他们不仅在 AngularJS $digest循环之外调用处理程序(这意味着您需要在$apply()内调用他们的代码(，而且还会导致代码的透明度大大降低。
例如，当绑定到<a>元素上的click时，只需使用
<a ng-click="someHandler()">...</a>
或
<a ng-click="someHandler($event)">...</a>
如果要获取事件数据。同样，您的处理程序应该只更改作用域上的一些数据，而不是手动修改元素类等。
加载和存储全局数据
加载要在整个应用程序中使用的数据时，您可以简单地执行以下操作：
angular.module('...', [...]).run(['$http', '$rootScope', function ($http, $rootScope) {
$http(...).success(function (data) {
$rootScope.someDataVar = data;
});
}]);
并查看所有范围的数据。但是，这会不必要地污染您的$rootScope。相反，您可以创建一个封装整个视图的外部控制器，并将数据放在其范围内。此外，你可能希望将全局数据存储在全局服务中，以便可以将其注入到未绑定到任何范围的其他服务中。