Javascript 如何使用angular.js创建活动（类）

我正在使用并且喜欢在链接上使用他们的活动类。我还想同时使用它们的图标。我试图实现这个实践，但是我得到了这个错误

未捕获的语法错误：意外标记。

及

这是我的HTML：

 <section class="top-bar-section uk-navbar-flip" ng-app="link">
    <ul class="uk-navbar-nav ">
       <li active-link="uk-active"><a href="/#home"><i class="uk-icon-home uk-icon-medium "> </i>home</a></li>
       <li active-link="uk-active"><a href="/#work"><i class="uk-icon-photo uk-icon-medium "></i> work</a></li>
       <li active-link="uk-active"><a href="/#contact"><i class="uk-icon-envelope-o uk-icon-medium "></i> contact</a></li>
    </ul>
 </section>

//主页的路径

 rustyApp.config(function($locationProvider, $routeProvider) {

$locationProvider.html5Mode(true);
$routeProvider
    .when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'HomeController'
    })
    .when('/work', {
        templateUrl: 'partials/work.html',
        controller: 'WorkController'
    })

.when('/contact', {
        templateUrl: 'partials/contact.html',
        controller: 'ContactController'
    })
    .otherwise({
        redirectTo: '/home'
    });

  });

  var viewController = angular.module('viewController', []);
  var viewController = angular.module('viewController', []);

  .directive('activeLink', ['$location', function(location) {
    return {
    restrict: 'A',
    link: function(scope, element, attrs, controller) {
        var clazz = attrs.activeLink;
        var path = attrs.href;
        path = path.substring(1); //hack because path does bot return including hashbang
        scope.location = location;
        scope.$watch('location.path()', function(newPath) {
            if (path === newPath) {
                element.addClass(clazz);
            } else {
                element.removeClass(clazz);
            }
        });
    }

};

}]);



rustyApp.controller('HomeController', function($scope) {});
rustyApp.controller('WorkController', function($scope) {});
rustyApp.controller('ContactController', function($scope) {});


var OffCanvasDemoCtrl = function($scope) {};

我怀疑我没有正确挂接

.directive

，或者没有包含控制器，但是如果你看小提琴，没有控制器

更新： 我想说的是：

HTML

<section class="top-bar-section uk-navbar-flip">
    <ul class="uk-navbar-nav ">
        <li  my-active-link="/"><a  href="/#home"><i class="uk-icon-home uk-icon-medium "> </i>home</a></li>
        <li  my-active-link="/work"><a  href="/#work"><i class="uk-icon-photo uk-icon-medium "></i> work</a></li>
        <li  my-active-link="/contact"><a  href="/#contact"><i class="uk-icon-envelope-o uk-icon-medium "></i> contact</a></li>
    </ul>
</section>

---

}))

您只需将

.directive（…

更改为

rustyApp.directive（…

），并将其置于config函数之外

这一行导致第一个JS错误，该错误导致rustyApp无法加载，因为出于某种原因，它位于配置中

我想你误解了正在发生的事情，所以我只在这里写一个小例子： ``` rustyApp=角度。模块（…）。控制器（…）

//与下面的结果相同。在我看来，你应该使用下面的内容，因为它更清楚

rustyApp=角模（…）； rustyApp.控制器（…）； ```

另外，

指令

，

配置

，

运行

，

工厂

，

服务

，

控制器

（以及我忘记的任何一个）都是模块“对象”上可用的函数。调用其中一个函数时，函数的结果就是调用它的模块

 rustyApp.config(function($locationProvider, $routeProvider) {

$locationProvider.html5Mode(true);
$routeProvider
    .when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'HomeController'
    })
    .when('/work', {
        templateUrl: 'partials/work.html',
        controller: 'WorkController'
    })

.when('/contact', {
        templateUrl: 'partials/contact.html',
        controller: 'ContactController'
    })
    .otherwise({
        redirectTo: '/home'
    });

  });

  var viewController = angular.module('viewController', []);
  var viewController = angular.module('viewController', []);

  .directive('activeLink', ['$location', function(location) {
    return {
    restrict: 'A',
    link: function(scope, element, attrs, controller) {
        var clazz = attrs.activeLink;
        var path = attrs.href;
        path = path.substring(1); //hack because path does bot return including hashbang
        scope.location = location;
        scope.$watch('location.path()', function(newPath) {
            if (path === newPath) {
                element.addClass(clazz);
            } else {
                element.removeClass(clazz);
            }
        });
    }

};

}]);



rustyApp.controller('HomeController', function($scope) {});
rustyApp.controller('WorkController', function($scope) {});
rustyApp.controller('ContactController', function($scope) {});


var OffCanvasDemoCtrl = function($scope) {};

<section class="top-bar-section uk-navbar-flip">
    <ul class="uk-navbar-nav ">
        <li  my-active-link="/"><a  href="/#home"><i class="uk-icon-home uk-icon-medium "> </i>home</a></li>
        <li  my-active-link="/work"><a  href="/#work"><i class="uk-icon-photo uk-icon-medium "></i> work</a></li>
        <li  my-active-link="/contact"><a  href="/#contact"><i class="uk-icon-envelope-o uk-icon-medium "></i> contact</a></li>
    </ul>
</section>

rustyApp.directive('myActiveLink', function($location) {
return {
    restrict: 'A',
    scope: {
        path: "@myActiveLink"
    },
    link: function(scope, element, attributes) {
        scope.$on('$locationChangeSuccess', function() {
            if ($location.path() === scope.path) {
                element.addClass('uk-active');
            } else {
                element.removeClass('uk-active');
            }
        });
    }
};