I uses angular ui tab (http://angular-ui.github.io/bootstrap/) and I added a delete btn inside the the js file. I can't do it with my markup because the js generate the template on the js side.
my ng-click doesn't work when I put this
<span ng-click="deleteTab()" >dlt</span>
js
$scope.deleteTab = function(){
//$scope.tabs.splice(this, 1);
alert('d');
}
within my controller. I tried to include the js on the topest and before the , nothing work. Until I try onClick. I wonder why I can't use ng-click in my situation?
If you add new HTML to the DOM without using angular, you need to $compile the HTML to let angular to bind the content and $watch changes. See the docs
$compile(element.contents())(scope);
Edit:-
Ah you can give the title as a HTML template as well,see the tabs definition
<tab ng-repeat="workspace in workspaces"
active=workspace.active>
<tab-heading>{{workspace.name}}<span ng-click="deleteTab()" >dlt</span></tab-heading>
<div ng-controller="TabsChildController" >
<div>
{{workspace.id}} : {{ workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
</div>
</tab>
and here is the solution
that's a plunker that could solve your problem.plunker the only doubt is what workspace would you want to close, i imagine it is the last, otherwise you only need to modify the delete method.
EDIT
in this version you can delete the selected workspace, you have to controll the css, but i thin it could be a good solution
new plunker
Related
I build one web app with angular material. Initially i started working on only one theme. later my requirements is changed to use other theme in some UI components. When i'm trying to apply new theme i.e. "lime". But it's apply for toolbar.
The issue is with $mdThemingProvider.setDefaultTheme('indigo');
If i remove the setDefaultTheme method it's working, But for that i need to change more code in existing files.
I need work around for with the default method and use other theme.
here is my code.
I think you missed the watch tag in your code
$mdThemingProvider.alwaysWatchTheme(true);
You have to add md-theme-watch in your template as well.
<div>
<md-button ng-click="dynamicTheme = 'default'">Default</md-button>
<md-button ng-click="dynamicTheme = 'altTheme'">altTheme</md-button>
<div md-theme="{{ dynamicTheme }}" md-theme-watch>
<md-button class="md-primary">I'm dynamic</md-button>
</div>
</div>
I've updated your plunker
http://plnkr.co/edit/dEIGT3y1l85TOH1bKdMD?p=preview
You can read the documentation here
https://material.angularjs.org/latest/Theming/04_multiple_themes
I am working on an issue in an application that mixes angularjs and thymeleaf. I want to build a template in thymeleaf that will allow me to use a variable to specify an angular attribute directive to use.
It seems like thymeleaf does not allow variables to be used as attributes. I have tried the following:
<div th:attr="${portlet.attrDirective}">
....
</div>
Didn't work
<div th:inline="text">
<div [[${portlet.attrDirective}]]>
...
</div>
</div>
Also didn't work
Am I doing something wrong?
There also is the possiblity of they portlet.attrDirective being null.
I got it working finally using the following code:
<div th:attr="${portlet.attrDirective == null} ? nodirective : ${portlet.attrDirective}=${portlet.attrDirective}">
...
</div>
Does anyone have a more readable solution?
I'm quite new to angular and frontend in general, but what i'd like to see is something similar to what routing with ngView gives, but without routing, i.e just load a template on some event. To be more specific, let's say i have an input field somewhere in the header and when i click/focus on this field a special panel with different input options shows up. The trick is that this input field and other elements are already a part of a template which is loaded into ngView, so as i understand i can't use another ngView for options pane.
use ngIf, ngShow, ngHide, ngSwitch for stuff like that
<button ng-click="showStuff = true">Show Stuff</button>
<button ng-click="showStuff = false">Hide Stuff</button>
<div ng-show="showStuff">Showing Stuff</div>
<div ng-hide="showStuff">Hiding Stuff</div>
Have a look at this plunker for a quick and dirty, working example.
Note that the showStuff variable is just magically created by angular on the root scope, since I'm not using a controller.
You can load templates with ng-if and ng-include like this example:
<body ng-app="app">
<div class='container'>
<button ng-click='tmpl = true' class='btn btn-info'>Load template!</button>
<div ng-if='tmpl'>
<div ng-include="'template.html'"></div>
</div>
</div>
</body>
The ngIf directive will add element to the DOM when the argument expression is true. Then, the angular will compile the inner directive ngInclude, loading the template.
I use angular-ui-bootstrap popover. I manually changed template of popover to support html in it. I changed ng-bind to ng-bind-html:
<div class=\"popover-content\" ng-bind-html=\"content\"></div>
I'm passing such template to popover attribute:
<span ng-click="scopeFunction()">{{somethingFromScope}}</span>
So {{somethingFromScope}} resolves and works, but ng-click function doesn't work. ng-show, ng-if (looks like any ng- directive) don't work as well.
What's the reason of it? How can I make it work?
Thanks
Just changing template is not enough
Update module dependencies like this:
angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip', 'ui.bootstrap.bindHtml'])
And change template
<div class="popover-content" bind-html-unsafe="content"></div>
Works with angular.ui.bootstrap v0.11.0 from 2014-05-01
After researching a lot I find a solution:
If you need popover with template - use AngularStrap popover ;)
I try to make tabs with Angular bootstrap.ui Tabs. Static tabs work, but dynamic don't show title and content. Below my code:
My JS:
(function (angular) {
angular.module('numeter', ['ui.bootstrap']).
controller('configurationMainTabCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.maintabs = [
{ title:"Users", content:"Test", url:"/user" },
{ title:"View", content:"", url:"/view" },
];
}]);
}(angular));
My HTML:
...
<div ng-controller="configurationMainTabCtrl">
<tabset maintabs>
<tab ng-repeat="maintab in maintabs">
<tab-heading>{{maintab.title}}</tab-heading>
{{maintab.content}}
</tab>
</tabset>
</div>
...
This code show me empty tabs selectable with empty content.
Since you didn't include all your code, I'm not sure if this was the problem, but in future it'd be mighty helpful if you linked to a plunker or fiddle. That way, we can see the code in action, and it's also easier to fork that with the solution. (Plus I find plunkers handy for narrowing down things to just the exact code I'm working on, which helps me troubleshoot.)
Here's a plunker with your code, edited: http://plnkr.co/edit/u80OhmN7YqYRytFE7kG5?p=preview
When using your setup, the only error I got was that it couldn't see your controller as a function, which means it's not picking up on the ng-app. As soon as I add ng-app="app" to the body tag, everything started working. Since I've only got the code you posted, I'm not sure, but that might've been one problem.
The other possible culprit might be these two lines:
<tabset maintabs>
<tab ng-repeat="maintab in maintabs">
change them to this:
<tabset>
<div ng-repeat="maintab in maintabs">
and then things should be behave. Otherwise you've got ng-repeat on the tab directive, when the directive expects just one tab per, well, tab. Put the part inside the ng-repeat, not alongside it, I mean.
Not sure if its relevant to your case, but I had the same issue in a different scenario. If you are using ng-include like this <div ng-include="'mytemplate'" ng-controller="MyCtrl"></div>, then there is a scoping problem somewhere between 1.1.6 and 1.2.2 which might explains why you might not be seeing maintabs.
Thanks for all your responses.
It was a noob mistake. I use Django and {{...}} are evaluated by Django template system. I add {% verbatim %} tag to escape angular part and it works.