I am using angular 1.5 component. I have created a component and used it inside the template
<ul>
<li>
<a>Some action here</a>
</li>
<li>
<my-component></my-component>
</li>
</ul>
inside this my-component I have code for
<a></a>
and css properties are defined as ul li a, because of the component name I am unable to access the element in css using the above selector.
Is there any way out for this ?
You can - in your css file - do:
my-component {
//your styles
}
http://plnkr.co/edit/Lw18LtUVuHfSZU05b6R9?p=previewplunker, see last component
I have face this problem earlier, just try to add
replace: true
property on your directive.
hope it will also work for you.
Related
I have the following Plunker that uses ui-router and Angular's 1.6x new component feature.
The state 'userRegister' becomes active then initialises the 'userRegister' component. This component injects a new <user-register/> into the <ui-view> then injects the HTML contents of the ng-template script block, which is all working fine.
The final DOM ends up being:
<ui-view class="ng-scope">
<user-register class="ng-scope ng-isolate-scope">
<h1 class="header">Create account</h1>
</user-register>
</ui-view>
However, I cannot find a way to add a CSS class selector to the <user-register/> tag.
e.g. using a class selector called .example I'd like to achieve the following:
<user-register class="example ng-scope ng-isolate-scope">...<user-register/>
Any ideas please?
Sure you could always wrap the template on a div and put the class there.
If don't want to do it, you can inject the $element and use the $postLink function to add the class you need:
.component('userRegister', {
templateUrl: '/views/user-register',
controller: function($element) {
this.$postLink = function() {
$element.addClass('example');
}
}
})
Here is the working plunker:
https://plnkr.co/edit/VuWu8L9VqrgJRGnxItY2?p=preview
Final DOM:
<user-register class="ng-scope ng-isolate-scope example">
<h1 class="header">Create account</h1>
</user-register>
angular-bootstrap version used : 1.2.0
angular-version : 1.5.7
I am trying to override header html of uib-tab like below,
<li ng-class="{active: active, disabled: disabled}" class="uib-tab">
<a ui-sref="MyController.overviewStateUrl" ng-click="select()" uib-tab-heading-transclude>{{heading}}</a>
</li>
When the page is rendered, the value for ui-sref is taken as MyController.overviewStateUrl instead of the real value which is stored in overviewStateUrl attribute of MyController. Is there any way to do it?
I tried to put it inside interpolation, but it returns empty string. Here's the plunker.
Have you tried as like below code?
<a ui-sref="{{MyController.overviewStateUrl}}" ng-click="select()" uib-tab-heading-transclude>{{heading}}</a>
so I'm currently working on a project written in Flask which I added Bootstrap to. I have recently started adding some react components and I would like to have them look like the other bootstrapped components. Here is some of my code:
This is where I've included my bootstrap.js files and react.js file
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/build/react.js"></script>
<script src="/static/js/build/JSXTransformer.js"></script>
<script src="/static/js/react-bootstrap-bower/react-bootstrap.js"></script>
This html normally is rendered by bootstrap as wonderful little pager icons, but not in react:
return (
<div>
<nav>
<ul className="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
I understand I didn't put the full return, the return isn't the issue at hand, however, its the styling. I tried adding in a Pager element with the following
var Pager = ReactBootstrap.Pager;
...
//inside some html return
<Pager></Pager>
but I get the response first that ReactBootstrap is not defined. Yet I read that the ReactBootstrap global is created automatically when you include the js file. The other response is that Pager doesn't exist (obviously since ReactBootstrap was unable to return it).
So my question is, can I simply return html without the data-reactid info or somehow have it rendered by bootstrap without needing reactBootstrap? or do is there something I'm missing from my files to use reactBootstrap. Thanks in advance for the help!
I tried to reproduce it in a jsbin, but ReactBootstrap.Pager is a component, and it renders with the correct styles.
You're not loading things correctly.
I am just getting started working with AngularJS and have stumbled on combining multiple bits of content under the same element. In our previous version (using knockout/durandal) we were able to leverage "container-less syntax" to make this work but it doesn't seem like we can do the same with AngularJS.
<ul>
<li>this item comes from an ng-include</li>
<li>this item is defined statically</li>
</ul>
What I thought would work:
<ul>
<ng-include src="'thefile.html'" />
<li>this item is defined statically</li>
</ul>
Unfortunately, the resulting html includes an extra DOM layer wrapper which breaks my css - I am using a "ul > li" selector.
<ul>
<ng-include class="ng-scope" src="'thefile.html'">
<li class="ng-scope">
...
</li>
</ng-include>
<li>this item is defined statically</li>
</ul>
Attempt #2 was to include the content on the itself. It also didn't work. The static content was omitted completely:
<ul ng-include src="'thefile.html'">
<li>this item is defined statically</li>
</ul>
Is there a smarter/correct way to do this? I believe I'm looking for something similar to a "replace" property that I could use on a directive.
Thanks in advance.
If your css is the only thing that is causing you problems. Try
ul li{
color:red;
}
or
ul > li,
ul > ng-include > li{
color:red;
}
I have a page where there are few tabs and I use angular+bootstrap.
I use angular.bootstrap initially.
Then I have another controller for showing different set of data in one of the tabs. when I try to use angular.bootstrap again, I get the error it cannot be bootstrapped twice. To make it simple, consider the following code.
<div id="mainpage" ng-controller="mainPageController">
<ul>
<li id="test1"> <a href="gototest1"> GoToTest1 </li>
<li id="test2"> <a href="gototest2"> GoToTest2 </li>
</ul>
</div>
<div id="gototest1">
this is some sample. I have another html page here which will be loaded as a tab
</div
The page for gototest1 looks like this
<div ng-controller="gototestcontroller>
Here comes the another widget from another controller and
I try to use angular.boostrap here again. And I get the error because it is already bootstrapped in mainPage
</div>
What is the best way to use angular.bootstrap here?
Angular bootstrap is used to manually initialize an Angular the document or an element.
https://docs.angularjs.org/guide/bootstrap
Angular cannot be initialized more than once on an element. Is there a reason you don't use automatic initialization, using ng-app?
It sounds like you could benefit from using the module ngRoute and applying the attirbute ng-view instead of trying to bootstrap twice.
https://docs.angularjs.org/api/ngRoute