指令搞砸了样式，AngularJS [英] Directives messed up styling, AngularJS

问题描述

我的目标是创建一个导航项指令，它将与 Twitter Bootstrap 一起使用.我当前的代码将 <li> 标记进一步降低了一个级别，所以我认为这就是 bootstrap 的 CSS 不兼容的原因.

这是我的指令.js文件

angular.module('wdiary.directives', []).directive('导航', [function(){返回 {限制:'E'，转置:真实，templateUrl: 'partials/directives/navitem.html',范围: {} ，链接:函数(范围，元素，属性){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-嵌入></a></li>

index.html 的一部分:

<div class="navbar-inner"><a class="brand" href="#/">WDiary</a><ul class="nav"><navitem redirect = "#/write">写 </navitem><navitem redirect = "#/list">列表 </navitem>

和controllers.js 文件

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

我已经检查了结果，这是我能看到的:

<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">写 </span></a></navitem>

我认为解决方案是告诉 Angular 不要将列表包装在另一个标签中?

解决方案

在指令中的返回对象中添加 replace: true .这将像您想要的那样替换它.

angular.module('wdiary.directives', []).directive('导航', [function(){返回 {替换:真的，限制:'E'，转置:真实，templateUrl: 'partials/directives/navitem.html',范围: {} ，链接:函数(范围，元素，属性){scope.redirectRoute = attrs.redirect;var r = attrs.redirect;scope.itemName = r.substring(r.indexOf('/') + 1, r.length);}}}]);

My goal is to create a navigation-item directive, that will work with Twitter Bootstrap. My current code places the <li> tags further down a level, so I presume that's the reason bootstrap's CSS is not compatible.

This is my directives.js file

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);
        }
    }
 }]);

The navitem.html directive template:

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

A part of 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>

And the controllers.js file

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

I have inspected the result, this is what I can see:

<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>

I think the solution would be to tell Angular not to wrap the list in another tag?

解决方案

Add in the replace: true to your return object in your directive. This will replace it like how you want.

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);
        }
    }
 }]);

这篇关于指令搞砸了样式，AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！