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
Related
I have main.cshtml file
It has a head tag which includes css and js references.
I have two directives / templates.
I want to have different two title. When page1 opened (has template1) I want page's title to be Page-1.
When page2 opened (has template2) I want page's title to be Page-2.
I tried to put head tags to directive but it doesn't read title and icon-for-title.
<div style="height: 100%">
<head>
<title>{{::title}}</title>}}
<link rel="shortcut icon" href="../../../../icons/icon1.ico">
</head>
<div class="..." >
<div class="...">
<div>...............
It doesn't work neither like that or head tag is over the main div.
I tried to do with routing, in route giving title property but in config file rootScope can not be read.
So I tried to run() with module. But it didn't work too.
module.run(function($rootScope){
$rootScope.$on("$routeChangeSuccess", function(currentRoute,
previousRoute){
//Change page title, based on Route information
$rootScope.title = $route.current.title; }) ;});
Can you please help how can I have these two different title and icons. Or if it has to be two different head tag to see them, how can I create these?
I don't have a lot of information to go on for your specific use case,
but we set the title programmatically like this:
$document.prop('title', title);
You could trigger this code on $stateChangeSuccess.
In this example, you define the title in the state definition and update it when the state changes:
var module = angular.module('someModule', ['ui.router']);
module.run(function($rootScope, $stateProvider, $document) {
// use ui-router additional route data to configure the title of the state
$stateProvider.state('someState', {
url: 'someUrl',
controller: 'SomeCtrl',
templateUrl: 'some.tpl.html',
data: {
title: 'Your states title goes here'
}
});
$rootScope.$on("$stateChangeSuccess", function(event, currentState) {
//Change page title, based on title found in route definition
$document.prop('title', currentState.data.title);
});
});
This examples assumes you're using ui-router for routing.
I've started to learn Ext JS and immediately stumbled on the 1st step of their quick start.
Where should I put that hello world code to see the result in my web page, not their interactive demo?
I have local web server up and running, so the question is in application's files layout.
You create an app.js file in the root of your project, and then put the code there. You also should include this file in the index.html file, after the inclusion of library scripts, like so:
<script type="text/javascript" src="app.js"></script>
Basically you firstly load the ExtJS library files, and then you load a file that does something using ExtJS.
Or you might not need any additional file, just include the code in index.html (also after the library is loaded) in form of inline javascript:
<script type="text/javascript">
Ext.application({
name: 'MyApp',
launch: function() {
Ext.Viewport.add({
xtype: 'panel',
title: 'New Panel',
html: 'My new panel!'
});
}
});
</script>
I was able to successfully implement the API on web, here is what it looks like, I have a button in a regular html file...
<div>
<span class="radio-button radio-left" id="sandboxLinkButton">Sandbox Mode</span>
</div>
I include the script tag...
<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>
and I include the following javascript in the html body...
<script type="text/javascript">
var sandboxHandler = Plaid.create({
clientName: 'SUM',
env: 'tartan',
product: 'auth',
key: 'test_key',
onSuccess: function(token) {
//window.location = '/accounts.html?public_token=' + token;
console.log("yes");
},
});
// Open the "Institution Select" view using the sandbox Link handler.
document.getElementById('sandboxLinkButton').onclick = function() {
sandboxHandler.open();
};
</script>
Now I want to do the same using angular js. I'm using an ionic framework (not that it really matters). So I first display the necessary html using the following...
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
});
My menu.html file contains the following button...
<span ng-click="create()" class="radio-button radio-left" id="sandboxLinkButton">Sandbox Mode</span>
on ng-click it reaches the following controller. I tried to implement the API in this controller to no avail...
app.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
var sandboxHandler = Plaid.create({
clientName: 'SUM',
env: 'tartan',
product: 'auth',
key: 'test_key',
onSuccess: function(token) {
console.log("yes");
},
});
$scope.create = function() {
sandboxHandler.open();
}
});
I get the error Plaid is not defined in the controller. Why is that?
EDIT
I replicated a web app version using angular and it worked. I used the following CDN instead of the ionic/angular one
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
But I still can't get it to work on my ionic web app. Has anyone else ever come across this issue?
When I included the library I immediately got the following error in the browser: Uncaught TypeError: Cannot read property 'appendChild' of null
There are similar questions about this error regarding different libraries here and here, however I was not able to solve the problem based on those answers.
The closest thing to a solution that I found was in this issue report within the Plaid repository on GitHub. It describes a problem with the library not working when placed in the <head> tag. A commit within this issue report describes that this problem can be solved by including the script inside the <body> tag instead of the <head> tag.
I would recommend subscribing to the issue report to see whether other solutions will be introduced in the future.
So tldr; Try moving the <script> tag from <head> to the <body>.
You can simply use the Plain angular wrapper that I created:
https://github.com/khashayar/ng-plaid
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')
})