I have the following in my plunker
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="//code.jquery.com/jquery-2.1.1.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<accordion close-others="false">
<accordion-group heading="Company" ng-click="toggleOpen()">
<div class="row" data-ng-repeat="item in companyValues">
<div class="col-xs-6">
<input name="companyFilter" type="radio" value="{{item.value}}" id="{{item.name}}-filter-radio" ng-model="userData.companyFilter" ng-change="saveUserPreferences()" />
</div>
<div class="col-xs-6 pull-text-left">{{item.name}}</div>
</accordion-group>
</accordion>
</body>
</html>
However, when I try to run I get a 404 on template/accordion/accordion-group.html. Any ideas?
Your markup loads two different versions of ui.bootstrap.
A version with templates for components pre-loaded in Angular.js' $templateCache service.
A version with no pre-loaded templates for if you want to tweak control looks.
Since version #2 is loaded 2nd, it appears that all the pre-loaded templates are not available.
Solution: Delete the line:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
Example: http://plnkr.co/edit/JyNu2hggAFt33hTvfoXo?p=preview
When you use angular.ui you also have to include angular.ui.tpls in your dependencies like so:
var app = angular.module('myApp', ['ui.bootstrap', 'ui.bootstrap.tpls']);
Related
I'm facing troubles when using md-input-container directive with the k-rebind event of Kendo UI. The issue ocurrs when I tried to rebind the min value for the end date (Second datepicker).
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.8.1/angular-translate.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="appController">
<input id="datepicker" kendo-date-picker k-ng-model="date" />
<md-input-container>
<label>End Date</label>
<input id="datepicker" kendo-date-picker k-min="date" k-rebind="date" />
</md-input-container>
</div>
<script>
angular
.module('app', ['kendo.directives', 'ngMaterial'])
.controller('appController', function (){});
</script>
</body>
</html>
I think the issue ocurrs because when Kendo performs the rebinding, it clones the input node; but I am not sure of that.
Have you ever faced this issue? Or How do you get working both (md-input-container and k-rebind) together?
I'm working on a angularjsproject and I would like to add turbolinksto make the navigation on my WebSite faster. When I add turbolinksto my project, angularjsis not working.
I did an example on Plunker here.
I have two pages, index.html and products.html that look like that:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
<script src="turbolinks.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav>
<ul>
<li>
Home
</li>
<li>
Products
</li>
</ul>
</nav>
<p>Hello {{name}}!</p>
</body>
</html>
And a javascriptfile:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.products = 'Products';
});
You can see when turbolinksis added, the {{name}} and {{products}} values are not displayed.
How can I fix this issue?
Having tough times learning React. So I started to rewrite simple HTML + JavaScript page with React.
I want to prerender the html markup before the div with main application. I found that library with custom fonts (simple-line-icons) doesn't load in a way how I've done this. But if I put this <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div> div inside a component, the fonts are loaded fine. Here is the code of index.html how it looks now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="css/preloader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/simple-line-icons.css">
<!--[if lt IE 9]>
<script>
(function(){
var ef = function(){};
window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
}());
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
<![endif]-->
<script>
(function (i, s, o, g, r, a, m) {
Google Analytics code
});
</script>
</head>
<body data-spy="scroll">
<div id="preloader">
<div id="status_first">
<div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
</div>
<div id="status_second">
<div className="wow tada infinite" data-wow-duration="8s">K</div>
</div>
<div id="status_third">
<div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
</div>
</div>
<div id="app">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.8/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
<script src="js/js.cookie.js" charset="utf-8" type="text/javascript"></script>
<script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
so, the task is simply perrender this piece of code:
<div id="status_first">
<div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
</div>
<div id="status_second">
<div className="wow tada infinite" data-wow-duration="8s">K</div>
</div>
<div id="status_third">
<div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
</div>
How it could be done in simple way? Need a working example please
Well, I've solved it by moving the html code to the first child component of the App.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title> Angular JavaScript! </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
</body>
</html>
my script.js
var app = angular.module('myApp'. []);
app.controller('myCtrl', function($scope){
$scope.Firstname = "guidy";
$scope.Lastname = "manson";
})
I've been trying to find a for solution for this for hours and I just can't find any.
My problem is that the data binding suddenly isn't working after I put ng-app="myApp" in my Html tag. However, when I put it this way: ng-app="", the data binding is already working. Can you guys figure out why angularjs data-binding is not working after I put or identify "myApp" in my ng-app?
var app = angular.module('myApp'. []);
This should have a comma and not a dot
var app = angular.module('myApp', []);
Also add ng-controller="myCtrl" to your view
you should add ng-controller directive to your view.
<body ng-controller="myCtrl">
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
I am using urish/angular-spinner but it is not working when I try to use it in controller through $scope.startSpin() and $scope.stopSpin();
Please find my plunker at Plunker. Here the spinner is not appearing at all.
The following is my code for starting and stopping spinner.
$scope.startSpin();
DashboardsDataService.getNetSpendOverTimeData()
.then(function(data) {
$scope.data = data;
$scope.stopSpin();
});
it is very simple you just need to remove the
spinner-key="spinner-1"
and will just work fine!
the final code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<script type="text/javascript" src="angular-spinner.js"></script>
<script src="app.js"></script>
<script src="services.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-controller="MainCtrl">
<span us-spinner="{radius:30, width:8, length: 16}" ></span>
<div>
<pre class="code">{{data | json }}</pre>
</div>
</body>
</html>
plnkr
http://plnkr.co/edit/yTIsH9uvD5JZEePMyeAi?p=preview
There's a bug: https://github.com/urish/angular-spinner/issues/26 spinner keys won't work.
What worked for me was registering every spinner in an array: when you call .spin(spinnerName) just add {spinnerName: true} to some controller's array, when you call stop(spinnerName) change it to {spinnerName: false}. Then show/hide the spinner with ng-if based on an expression like ng-if="mySpinners['spinnerName'] == true"