Question

我试图做一些理论上应该简单的事情。我已经用Google搜索了答案，但还没有找到任何有用的东西。我使用的是Angular JS 1.4.9。我想要发生的是：

<ul>
   <li><a href="#/search">Search</a></li>
   <li><a href="#/reports">Reports</a></li>
   <li><a href="#/about">About</a></li>
</ul>

转向：

Substring()

我想将此作为指令，以便当用户点击链接时，我可以应用＆＃34;活动＆＃34; LI元素的CSS样式。但是对于我的生活，我无法让它发挥作用。说实话，翻译和编译（如果其中任何一个都是它需要的）一直是我对Angular 1.x的弱点。

有人有任何想法吗？

提前致谢！

Answer 1

我没有看到使用翻译或编译的需要，我做了一个小指令来管理这个，所以我们有一些东西可以玩。下次如果您提供更多详细信息或代码示例会更好。

尝试这样的事情让我知道：

(function(angular) {
  'use strict';

  angular.module('app', [])
    .directive('siteMenu', [function () {
      return {
        restrict: 'AE',
        scope: {
          menus: '='
        },
        controller: SiteMenuController,
        controllerAs: 'vm',
        bindToController: true,
        templateUrl: 'site-menu-template.html'
      };

      function SiteMenuController() {
        var vm = this;

        vm.selected = 0;

        vm.onClick= function(index) {
          vm.selected = index; 
        };
      }
  }])

  .run(['$templateCache', function($templateCache) {
    $templateCache.put('site-menu-template.html',
      '<ul>' +
        '<li ng-repeat="menu in vm.menus" ng-click="onClick($index)" ng-class="{active: $index == vm.selected}">' +
          '<a ng-href="#/{{ menu }}">{{ menu }}</a>' +
        '</li>' +
      '</ul>'
    );
  }]);
})(window.angular);

指令用法：

<site-menu menus="['search', 'reports', 'about']"></site-menu>

嵌套Angular指令

1 个答案: