Question

我想知道如何使用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值是＆＃34;全球＆＃34; （在应用程序中使用，许多控制器应该能够访问它。）例如，我计划动态加载菜单项（基于用户权限），我应该在哪里加载它们？

修改

加载UI值：使用$resource或$http加载外部json 如果从代码中不清楚，我需要一个菜单和类似功能的折叠按钮。

EDIT2： 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>

请求的Plunker链接：

Plunker link

Answer 1

您的代码看起来可能以this guide开头。以下是我的一些建议：

调整视图并上移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()内调用他们的代码），但它们也会导致代码透明度降低。

例如，绑定到click元素上的<a>时，请使用

<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。相反，您可以创建一个封装整个视图的外部控制器，并将数据放在其范围内。此外，您可能希望将全局数据存储在全局服务中，以便将其注入到不绑定到任何范围的其他服务中。

设置UI默认值

1 个答案:

调整视图并上移DOM树

绑定事件处理程序

加载和存储全局数据