I make simple example of ng-repeat when I used ng-repeat it works fine .But when I use collection-repeat it gives me this error
Controller '$ionicScroll', required by directive 'collectionRepeat', can't be found!
could you please help me solving this error
Here is my my plunker
http://plnkr.co/edit/LjADQj07M4cEpTQP3WzS?p=preview
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Invoices Grid</title>
<!--Stylesheets-->
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!--Scripts-->
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="a">
<div class="row" collection-repeat="n in names">
<div class="col">{{n.name}}</div>
<div class="col">{{n.lasename}}</div>
</div>
</body>
</html>
First post Google post :
http://forum.ionicframework.com/t/error-compile-ctreq-controller-ionicscroll-required-by-directive-collectionrepeat-cant-be-found/4879
collection repeat needs a scrolling system.
Therefore, suround your code with <ion-content overflow-scroll="true" >
See updated plnkr : http://plnkr.co/edit/LuHPy3lbqYBlg35iYuw1?p=preview
Related
This is the code.
(I know that I must type here so many text to post my question, but please ignore this part in the parenthesis. It is due only to the rules of the site.)
I can not find the reason, but on screen only appears "{{adat}}".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<script src="https://code.angularjs.org/1.8.2/angular.js">
</script>
<script type="text/javascript">
function todoc($scope) {
$scope.adat = "Szia!";
}
</script>
</head>
<body ng-app>
<div ng-controller="todoc">
<h1> {{adat}} </h1>
</div>
</body>
</html>
It turned out that this version of Angular works with a newer syntax.
For this syntax the appropriate version is 1.0.0
I am not much familiar with angularjs+blade template mixing. The blade template of laravel is not rendering ng-include (angularjs) html files. Or is it necessary to convert all included html to blade file as well? With core PHP it was not an issue. What could be the way to work in this situation?
<title>{{ config('app.name', 'Nepstralia')}}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="assets/css/Footer-with-map.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<ng-include src="'nav.html'"> </ng-include>
<!-- <div id="toptarget"> </div><br> -->
<ng-include src="'carousel.html'"> </ng-include>
Non of the ng-included are loading in the blade template. How to use angular ng-include with blade ?
first you must declare angular app by ng-app then try follwing:
index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="assets/css/Footer-with-map.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body ng-app>
<div ng-include="'nav.html'"> </div>
<!-- <div id="toptarget"> </div><br> -->
<div ng-include="'carousel.html'"> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
carousel.html:
<h1>123</h1>
nav.html
<h2>145</h2>
if it isn't working may be your src is wrong .
The script below does not perform the calculation {{ 5+ 15 }}, it just returns "5+ 15" as seen in this image
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="lib/ionic/js/angular/angular-animate.js"></script>
<script src="lib/ionic/js/angular/angular-sanitize.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ionic/js/angular/angular.js"></script>
<script src="lib/ionic/js/angular/angular.min.js"></script>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">
<div style="color:#FF00FF" align="center">Ionic Testing</div>
</h1>
</ion-header-bar>
<ion-content>
<div ng-app="FirstModule" ng-controller="myFirstControl">
<input type="text" ng-model="FirstName" name="FirstName">
<input type="text" ng-model="SecondName">
<span ng-bind="FirstName"></span> Full Name: {{ 5+ 15 }}
</div>
</ion-content>
</ion-pane>
</body>
</html>
I just edited your question and noticed that you have ng-app declared twice:
There is one on the <body> tag and another on the first <div> inside <ion-content>.
Remove one of these (doesn't matter which) and your calculation should work as expected.
I have written the following code in the HTML file.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>Project Tracking Home Page</title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/Site.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1>Welcome To Project Tracker</h1>
<p>Addition of Two Numbers (100+100) is - {{100+100}}</p>
</body>
</html>
The binding expressions do not return the value instead they are shown as it is.
When i run this code, i find the error ''Node' is undefined.'
I have used NuGet packages to install the Angular Js and JQuery into the scripts folder.
Make sure that your browser's document mode is greater than IE 8
If it's IE, try this:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
I am following a tutorial on AngularJS - "Building a website with AngularJS"
The routes I am using are pretty much the same as the tutorial :
// JavaScript Document
angular.module('quest', []).
config(function($routeProvider) {
$routeProvider.
when('/about', {template:'partials/about.html'}).
when('/start', {template:'partials/start.html'}).
otherwise({redirectTo:'/home', template:'partials/home.html'});
});
The problem is: it only shows the path to the resource, instead of the contents of the resource, so instead of showing the html content, it just shows:
PARTIALS/ABOUT.HTML
I am not sure what I am doing wrong, but it does work, if i go to the #/about URL it shows "PARTIALS/ABOUT.HTML" if i change the url to index.html#/start it shows "PARTIALS/START.HTML"
html of page:
<!DOCTYPE html>
<html lang="en" ng-app="quest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title></title>
</head>
<body ng-controller="MainController">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/quest.js"></script>
<div ng-view></div>
</body>
</html>
Use templateUrl instead of template