Append template after element from a directive - javascript

Is it possible to insert a template after some element using an angular directive?
I'm trying to insert the "example.html" template after the text-area.
I made a plunker: https://plnkr.co/edit/bdBjmsi2lIbzxtl0Uw89?p=preview
As you can see the HTML is inside the text-area tag (dev tools).
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<script data-require="angular.js#1.5.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" data-semver="1.5.0"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="example-form">
<textarea rows="3" id="goal" name="name" data-ng-model="model.name" example="10"></textarea>
<example></example> <!-- Directive used here -->
</form>
</body>
</html>
script.js
app.directive('example', function() {
return {
restrict: 'A',
scope: {},
require: ['^form','ngModel'],
templateUrl: 'example.html',
link: function(scope, element, attrs, ctrls) {
console.log(element);
}
}
});
Thanks!

You didn't use directive anywhere in index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<script data-require="angular.js#1.5.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" data-semver="1.5.0"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="example-form">
<textarea rows="3" id="goal" name="name" data-ng-model="model.name" example="10"></textarea>
<example></example> <!-- Directive used here -->
</form>
</body>
</html>

Related

AngularJS is not defined

I'm starting to study in AngularJs at the beginning level. My project is used in the Spring Boot framework. I get an error message: "ReferenceError: angular is not defined". I have already created app.js which is a defined angular variable, but it is still an error.
app.js:
var app = angular.module('myapp', ['ngRoute']);
app.controller('mainController', ['$scope', function($scope) {
$scope.title = "Welcome";
}]);
welcome.jsp:
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html ng-app="myapp" lang="en">
<head>
<meta charset="utf-8">
<title>Create an account</title>
<link href="${contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<script src="${contextPath}/resources/js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
</head>
<body>
<div class="container" ng-controller="mainController">
<c:if test="${pageContext.request.userPrincipal.name != null}">
<form id="logoutForm" method="POST" action="${contextPath}/logout">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>
<h2> {{ title }} ${pageContext.request.userPrincipal.name} |
<a onclick="document.forms['logoutForm'].submit()">Logout</a></h2>
</c:if>
{{ title }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="${contextPath}/resources/js/bootstrap.min.js"></script>
</body>
</html>
How can I resolve this issue?
Move your script below
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html ng-app="myapp" lang="en">
<head>
<meta charset="utf-8">
<title>Create an account</title>
<link href="${contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
<!-- move it here -->
<script src="${contextPath}/resources/js/app.js"></script>
</head>
<body>
...
</body>
</html>
Add angular script before your app.js.
Since your app.js uses angular object, it must be already defined. angular scripts does that job, so it must be loaded before any angular code.
Try below
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
<script src="${contextPath}/resources/js/app.js"></script>

I have written code for simple AngularJS JavaScript but not working properly only root scope is updating but not the other two why

I have written code for simple AngularJS JavaScript but not working properly.
Only root scope is updating but not the other two why I want to update FirstCtrl and SecondCtrl to be updated when I update Root Scope, But this is not working the way I expected.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>AngularJS</title>
</head>
<body>
<div ng-app="">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
</div>
<script type = "text/javascript" src="main.js"></script>
</body>
</html>
main.js contains:
function FirstCtrl($scope){
}
function SecondCtrl($scope){
}
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
});
app.controller('SecondCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
<input type="text" ng-model="message">
<h1>{{message}}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="message1">
<h1>{{ message1}}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="message2">
<h1>{{ message2}}</h1>
</div>
</div>
Define controller in module. It will create different scope for different controller.
scope properties must be be in controller you must have an app in first and declare controller in your app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>AngularJS</title>
</head>
<body>
<div ng-app="myApp">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
</div>
<script type = "text/javascript" src="main.js"></script>
</body>
</html>
main.js :
var app=angular.module("myApp",[]);
app.controller("FirstCtrl",function($scope){
});
app.controller("SecondCtrl",function($scope){
});
We can do like this:
angular.module('myApp'[])
.controller('FirstCtrl',FirstCtrl)
.controller('SecondCtrl',SecondCtrl);
function FirstCtrl($scope){
}
function SecondCtrl($scope){
}
In index.html
Give reference main.js and give name of application
<body ng-app="myApp">

<base href> causes "[$rootScope:infdig] " error

I'm trying to send two parameters from first.html to second.html through url and get the value in second.html using routeParams. I have set the base tag as <base href="file:///D:/abhilash/node/angapp/"/> and on click of button the parameters in the input textboxes should be passed through url.
The first.html:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<base href="file:///D:/abhilash/node/angapp/"/>
</head>
<body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="controller.js"></script>
<div ng-controller="firstController">
First name:<input type="text" ng-model="firstName"><br>
Last name:<input type="" ng-model="lastName"><br>
<input type="button" ng-click="loadView()" value="submit" name="">
</div>
</body>
</html>
Second.html:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<base href="file:///D:/abhilash/node/angapp/"/>
</head>
<body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="controller.js"></script>
<div ng-controller="secondController">
{{firstName}}
</div>
</body>
</html>
This is the controller:
(function(){
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider,$locationProvider){
$routeProvider.when('/first',{
templateUrl:'/first.html',
controller: 'firstController'
})
.when('/second/:firstName/:lastName',{
templateUrl:'/second.html',
controller:'secondController'
})
.otherwise({
redirectTo:'/first'
})
$locationProvider.html5Mode(true);
})
app.controller('firstController',function($scope,$location){
$scope.firstName="";
$scope.lastName="";
$scope.loadView = function()
{
$location.path('second/'+$scope.firstName +"/" +$scope.lastName);
console.log($location.url());
}
})
.controller('secondController',function($scope,$routeParams){
$scope.firstName = $routeParams.firstName;
$scope.lastName = $routeParams.lastName;
})
}());
check this code here
If you are deploying your app into the root context (e.g. https://myapp.com/), set the base URL to /:
<head>
<base href="/">
...
</head>
If you are deploying your app into a sub-context (e.g. https://myapp.com/subapp/), set the base URL to the URL of the subcontext:
<head>
<base href="/subapp/">
...
</head>

Issue rendering Angular template using ng-include

Can anyone please let me know why my template in htmlpage1.html is not rendering?
Code in main.js:
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
});
htmlpage1.html:
<div>this is my template</div>
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div data-ng-include data-ng-src="'HtmlPage1.html'"></div>
</body>
</html>
Make sure the filename and template name you provide in index.html are the same - it's case sensitive -> rename your html file to HtmlPage1.html. You can set the template file in data-ng-include, like so <div data-ng-include="'HtmlPage1.html'"></div>
Here's a working example:
http://jsbin.com/casoza/1/edit

AngularJS: ng-keypress is not working

Problem: ng-keypress is not working but if I replace ng-keypress with ng-click then filterSearchData($event) function is working.
HTML:-
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script type="text/javascript" src="ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<body ng-controller="MyCtrl">
<input type="text" ng-keypress="filterSearchData($event)" />
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</body>
</html>
JS:-
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
$scope.filterSearchData = function(element) {
console.log(element);
};
});
In this case I recommend to use ng-change instead of ng-keypress.
// HTML:
<input type="text" ng-model="filter" ng-change="filterSearchData()" />
// Controller:
app.controller('MyCtrl', function($scope, $http) {
$scope.filterSearchData = function() {
console.log($scope.filter);
};
});
If for some reason you have to use such an old version of angular, which doesn't support ngKeypress directive, you can always add your own implementation. It's pretty easy to do, for example onKeypress directive:
app.directive('onKeypress', function() {
return {
scope: {
handler: '&onKeypress'
},
link: function(scope, element) {
element.bind('keypress', function(e) {
scope.handler({$event: e});
});
}
};
});
HTML:
<input type="text" on-keypress="filterSearchData($event)" />
Demo: http://plnkr.co/edit/OorXMYKZeXI9Lrc1wrRY?p=preview

Categories