I'm coding a Kendo/Angular program that allows users to add tabs to a TabStrip dynamically. This works fine, however I need to include in the tab content an Angular directive, like so:
$scope.tabStrip.append(
[{
text: "Tab Title",
content: "<div my-directive></div>"
}]
);
This does not work as Angular is not aware of the new content. Is including a directive in the content feasible?
Related
so Im building a brand new ExtJS 5 application using Sencha CMD 5.1.2.52 with the command sencha generate app MYAPP ../MYAPP
It automatically renders to the body tag, but I would rather render it to a div with the id "#myDiv". I looked for the renderto attribute on several files (views, models, app configuration files, etc) with no luck.
So is there a way to override this behavior? Thanks!
When you build an application with Sencha command, the main container will be a ViewPort and by default every ViewPort is rendered to document.body.
You could remove the autoCreateViewport config, and add a launch object where you would create your panel, example:
Ext.application({
name: 'MyApp',
extend: 'MyApp.Application',
//autoCreateViewport: 'MyApp.view.main.Main'
launch: function() {
Ext.create('MyApp.view.main.Main',{
renderTo: yourDivHere
});
}
});
I want to put some html into ext js panel. I have some panel and using panel.body.update('html code here') method. But when the page size is bigger than panel size there is no scrollbars to see whole page. Can I fix it? Or there are other ways to put html in Ext JS components?
Try below :-
{
xtype : 'panel',
id : 'agreement-content',
html : "",
cls : 'agreement-text'
}
Then you can set your html in this panel like below.
Ext.getCmp('agreement-content').setHtml('Your html content');
i am newbie to angular snap. I have the following requirement:
Slide out menu left side
should contain sub menus
Sub menus also should be collapsible.
Does angular snap will provide all these features?
I started working on example with angular snap slide out menu.
How do we give two different menus in the drawer and when the user clicks on menu1, main div should display page1 and when user clicks on menu2, main div should display page2.
Two small points:
Angular.js is a framework for building single page applications.
Snap.js is a library that provides a "shelf" like menu interface.
Angular Snap is simply an integration of these two components. You aren't limited from using normal JavaScript to show and hide elements on a page based on a users's click.
Rather than tell you how you should get Angular Snap specifically to do this, here's a way to implement a dropdown hide/show action in Angular, which is absolutely compatible with your Snap.js app instance.
Angular.js Dropdown
function dropdown($scope) {
$scope.subitems = [
{
title: 'Menu item one',
url: '#'
},
{
title: 'Menu item two',
url: '#'
},
{
title: 'Menu item three',
url: '#'
},
{
title: 'Menu item four',
url: '#'
}
];
}
<nav class="dropdown-wrap" ng-app ng-controller="dropdown">
Dropdown Menu
<ul ng-repeat="subitem in subitems" ng-show="showDetails">
<li>
{{subitem.title}}
</li>
</ul>
</nav>
To my earlier point, you shouldn't necessarily consider integrating this an end-all be all solution to your issue. There are probably simpler solutions in a few lines of JavaScript, and unless your menu items need to be dynamic, I wonder if it's isn't just producing extra overhead and debugging to have Angular produce markup that could be hard-coded.
Either way, I would take into account all of your requirements and go from there. Don't consider these libraries a limitation--there's no part of either of them that isn't JavaScript, so possibly consider other out of the box or easy to implement solutions that use simple tools that already exist in the browser.
EDIT: Borrowed some code from here
in my extjs app, i create a panel, i also add jquery to one page, however when i click the test section in this page, this page don't render test alert, it seems extjs panel forbid the jquery function. is there any solution to load both html and js to panel content.
relative code below:
var feedback=Ext.create('Ext.panel.Panel', {
title: 'Hello',
layout: 'fit',
autoScroll: true,
bodyStyle:{"background-color":"#fed"},
html: '<div id="test">test</div>',
});
....
$("#test").click(function(){
alert('test')
})
By experience, mixing jquery selector and Extjs element can be pain to manage together. I would suggest to use Ext js selector to do what you're trying to achieve in jquery, since it's pretty basic. However, if you still want to use jquery, using on() function could help, the object is maybe not rendered yet when your jquery code is reached.
$("#test").on('click', function(){
alert('test')
})
I'm trying to implement a dropdown menu on angular. So far I got the list of items to print out, but it looks like the following image:
Simply put, it has no style applied to it. Here's what my code looks like.
index.jade
!!!
html
head
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js')
script(src='js/lib/uibootstrap/ui-bootstrap-tpls-0.6.0.min.js')
...(skip)
body(ng-app="appName")
div(ng-controller="controllerName")
div(class="parent")
span(class="dropdown")
span(class="dropdown-toggle") EBOOKS
ul(class='dropdown-menu')
li(ng-repeat='item in ebook')
a(href="{{item.url}}", target="blank") {{item.title}}
page.js
angular.module('page', ['ui.bootstrap']);
function controllerName($scope) {
$scope.ebook = [{
title: 'Link to Google',
url: 'http://www.google.com/'
},
{ title: 'Link to Bing',
url: 'http://www.bing.com/'
},
{
title: 'A long title testing is being done here lalalala',
url: 'http://duckduckgo.com'
}];
}
I've spent so much time on this but can't seem to make any breakthrough. Please help.
Your jade does not include the ui-bootstrap CSS file. In this plunker example from the ui-bootstrap page you'll see they use this CSS from a CDN:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
I suspect that probably translates to something like
link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css', rel='stylesheet')
in jade