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还附带了jqLite，（你猜对了，jQuery的精简版），所以在导入整个jQuery lib之前，看看你是否可以用jqLite完成你需要的东西。

Answer 2

在角度中，您通常不会根据操作添加类，而是根据应用的状态添加类。例如，如果您选择列表中的许多项之一，则可以将其选定的属性更改为“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让角度处理更改类：

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

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

这里的重点是角度应用app不仅仅是移植jQuery动作;这是关于构建一个更智能的应用程序。

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

2 个答案: