指令搞砸造型,AngularJS [英] Directives messed up styling, AngularJS
问题描述
我的目标是创建一个导航项指令,将与Twitter的引导工作。我现在的code则以<李方式>
标签进一步下降一个等级,所以我presume这就是原因,引导的CSS是不兼容的。
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.
这是我的directives.js文件
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);
}
}
}]);
该navitem.html指令的模板:
The navitem.html directive template:
<li ng-class = "{active: $route.current.activeNavigationItem == '{{itemName}}'}"><a href="{{ redirectRoute }}" ng-transclude> </a></li>
index.html的的一部分:
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>
而controllers.js文件
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屋!