指令搞砸造型，AngularJS(Directives messed up styling, Ang

我的目标是创建一个导航项指令，将与Twitter的引导工作。我当前的代码放置在<li>标记进一步下降一个等级，所以我相信这就是原因引导的CSS是不兼容的。

这是我directives.js文件

angular.module('wdiary.directives', [])
 .directive('navitem', [function(){
    return {
        restrict: 'E',
        transclude: true,
        templateUrl: 'partials/directives/navitem.html',
        scope: {} ,
        link: function(scope, element, attrs) {
            scope.redirectRoute = attrs.redirect;
            var r = attrs.redirect;
            scope.itemName = r.substring(r.indexOf('/') + 1, r.length);
        }
    }
 }]);

该navitem.html指令模板：

<li ng-class = "{active: $route.current.activeNavigationItem == '{{itemName}}'}"><a href="{{ redirectRoute }}" ng-transclude> </a></li>

的index.html的一部分：

<div class="navbar" ng-controller = "NavigationController">
  <div class="navbar-inner">
    <a class="brand" href="#/">WDiary</a>
    <ul class="nav">
      <navitem redirect = "#/write"> Write </navitem>
      <navitem redirect = "#/list"> List </navitem>
    </ul>

  </div>
</div>

而controllers.js文件

angular.module('wdiary.controllers', [])    
.controller('NavigationController', ['$scope', '$route', function($scope, $route) {
    $scope.$route = $route;
}])

我已经检查的结果，这是我所看到的：

<ul class="nav">
  <navitem redirect="#/write" class="ng-isolate-scope ng-scope">
    <li ng-class="{active: $route.current.activeNavigationItem == 'write'}">
        <a href="#/write" ng-transclude=""> 
            <span class="ng-scope"> Write </span>
        </a>
    </li>
  </navitem>
</ul>

我认为，解决办法是告诉角度不包裹在另一个标签列表？

添加在更换：忠实于你的返回对象在你的指令。这将取代它怎么样，你想要的。

angular.module('wdiary.directives', [])
 .directive('navitem', [function(){
    return {
        replace: true,
        restrict: 'E',
        transclude: true,
        templateUrl: 'partials/directives/navitem.html',
        scope: {} ,
        link: function(scope, element, attrs) {
            scope.redirectRoute = attrs.redirect;
            var r = attrs.redirect;
            scope.itemName = r.substring(r.indexOf('/') + 1, r.length);
        }
    }
 }]);