jquery - 使用 AngularJS，我如何根据动作有条件地添加一个类？

Question

我的jQuery代码如下所示：

  $("body").on("click", ".nav-bar", function(e){
    $(".my-nav").addClass("open");
  });

我想对此进行角化。有几个不同的控制器/视图会有一个.nav-bar类，所以我很确定我必须使用一个指令。我只是不知道该怎么做。理想情况下，我可以剥离所有 jQuery。

谢谢

Answer 1

创建指令：

.directive("navbarAction", function() {
    return {
        restrict: 'A', //<---Look up what this does, there are other options
        link: function(scope, elem, attrs) {
            //Using jQuery
            $(elem).click(function() {
                $(".my-nav").addClass("open");
            });
        }
    }
});

然后在您的.nav-bar元素中，添加一个navbar-action属性。

样本：

<input type='button' value='Click me!' navbar-action />

Angular 还附带了 jqLit​​e，（你猜对了，一个 jQuery 的精简版），所以在导入整个 jQuery 库之前，看看你是否可以用 jqLit​​e 完成你需要的。

Answer 2

在 Angular 中，您通常不会基于操作添加类，而是基于应用程序的状态。例如，如果您选择列表中的多个项目之一，您可以将其 selected 属性更改为“true”。

例如：

$scope.items = [{id: 1, name: "test", selected: false}, {id: 2, name: "test 2", selected: true}, {id: 3, name: "test 3", selected: false}]

然后在您的模板中，您将使用 ng-class 让 Angular 处理更改的类：

<ul>
  <li ng-repeat="item in items" ng-class="{ selected: item.selected }">{{item.name}}</li>
</ul>

对于您的导航栏，我实际上会考虑您的应用程序状态。这个导航栏是否反映了您在应用程序中的当前位置？如果是这种情况，您应该开始检查您的 $routeParams （或 $stateParams 如果您使用出色的ui-router）并以这种方式有条件地添加类。

这里的要点是，对应用程序进行 angular-fying 不仅仅是移植 jQuery 动作；这是关于构建更智能的应用程序。