I have an application where a part of the page is implemented in angular js. I have a requirement where I have to reload the angular js template coming from the server, based on some user action. I have simulated the exact situation with a dummy code,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script type="text/javascript">
var angApp = angular.module("app", []);
angApp.controller("mainCtrl", function($scope){
$scope.p1 = "Hello1";
$scope.p2 = "Hello2";
})
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
function add(){
var tpl = "<div>{{p1}}</div><div>{{p2}}</div>";
$("#container").html("");
$("#container").html(tpl);
angular.element(document).injector().invoke(function($compile){
var obj=$('#angApp');
var scope = angular.element($("#angApp")).scope();
$compile(obj.contents())(scope);
scope.$digest();
});
var angControllerScope = angular.element($("#angApp")).scope();
angControllerScope.$apply(function() {
angControllerScope.p1 = "New Hello";
});
}
</script>
<body>
<button type="button" onclick="add()">Add</button>
<div id="angApp" ng-controller="mainCtrl">
<div id="container">
<div>{{p1}}</div>
<div>{{p2}}</div>
</div>
</div>
</body>
On click of Add button how to get the value as "Hello" again.
Thanks.
Sorry if i have misunderstood what you mean but this is what i think you are trying to achieve...
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
$scope.p1 = 'Hello';
$scope.add = function() {
$scope.p1 = 'New Hello'
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app">
<div class="container" ng-controller="mainController">
<button type="button" ng-click="add()">Add</button>
{{p1}}
</div>
</body>
</html>
Found the solution. I had to recompile the template so that the binding with controller again works fine. Below link was useful.
https://gist.github.com/umidjons/1fb8ae674df4c71f85cf
I have updated the initial code with the working version.
Related
I am learning how to use angularjs and just need a good place to start. I tried to write this simple app but cant get it working, so can someone help me fix it, and help point me in the right direction.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="palcheck">
<h1>{{palcheck}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var str = $scope.palcheck
$scope.check = str === str.split('').reverse().join('');
ng-if="palcheck"
});
</script>
</body>
</html>
I would add a change listener to the input, and then set the value of it is is a match in that listener.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="palcheck" ng-change="onChange()">
<h1>{{palcheck}}</h1>
<h1>Is Match: {{isMatch}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.onChange = function(){
$scope.isMatch = str === str.split('').reverse().join('');
};
});
</script>
</body>
</html>
How to save data from the form by clicking on the button?
I do not understand where the error is.
As planned, when you click on the data from the field stored in the variable "master"
For example I use this tutorial: http://www.w3schools.com/angular/angular_forms.asp
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body> <div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="firstName"><br>
<button ng-click="copyData()">Click Me!</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {uder.firstName};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.copyData=function(){
$scope.master1=angular.copy($scope.mas);
$scope.copyData();
}
});
</script>
</body>
</html>
First of all you have a typo error. Replace {uder.firstname} with {user.firstname}.
You should put some effort on understanding scopes and how you can use variables, that you declare on scopes.
You declare an input with ng-model="firstname", but on the controller you have a user object with the attribute firstname. You should change your form to:
<input type="text" ng-model="user.firstName"><br>
<button ng-click="reset()">RESET</button>
<button ng-click="copyData()">Click Me!</button>
and in your controller
app.controller('formCtrl', function($scope) {
$scope.user = { firstname:"", lastname:"" }; //init your user
$scope.master = user.firstname; //or user object itself, dont understand what exactly you would like to achieve
$scope.reset = function() {
$scope.user = $scope.master;
};
$scope.copyData=function(){ }//call your onclick event
//set the data, that you want directly here. Recursion will not work.
More information about scope and forms can definitely help you.
Firstly,There are some typos like $scope.mas and {uder.firstname}.
Inspite of that you are assigning a property to the $scope object using ng-model directive but in the controller you are trying to access it using an object called user which would be undefined at this point.Here is the change in your code
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
<button ng-click="reset()">
RESET</button>
<button ng-click="copyData()">
Click Me!</button>
</form>
<p>
form = {{user}}</p>
<p>
master = {{master}}</p>
The controller would be like
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.copyData = function () {
$scope.master = user.firstName;
$scope.master1=angular.copy($scope.master);
$scope.copyData();
};
Thanks to all!
A working version:
(function(angular) {
'use strict';
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);
})(window.angular);
-<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular JS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="angular.min.js"></script>
<script src="weather 2.js"></script>
</head>
<body ng-app="scopeExample">
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>
</body>
</html>
http://codepen.io/krabbypattified/pen/oYxmKz
View above Codepen. The Chrome DevTools console returns Error: [$injector:modulerr]. The same error occurs when script area is commented.
However, when script area is commented and the (identical) JS section is uncommented, Angular works fine with no errors. Why does this happen??
Note: I have a large application and isolated the bug to this phenomenon. I'm using a Prepros server and I'm getting this same annoying $injector error.
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script>
var app = angular.module('testApp',[]);
app.controller('testController', function($scope){
$scope.title = "Hello, World!";
});
</script>
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.title = "Hello, World!";
});
</script>
Your angularjs library reference is not applied to your code.
In codepen,Attach your script in HTML rather than mentioning in settings window,
CODEPEN DEMO
Problem is codepen in HTML window you can have only HTML code,
Check here it works,
<body>
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script>
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.title = "Hello, World!";
});
</script>
</body>
DEMO
Codepen adds the code after the HTML, so the script you have initializing Angular won't have access to angular. If you change to this it will work.
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script>
var app =
angular.module('testApp', []).controller('testController', function($scope){
$scope.title = "Hello, World!";
});
</script>
I am new to angularjs and I want to know why it isn't working.
The code has a flaw and am not sure about the same.
Thinking from java perspective,httpController defined has nested function defined inside.
Here it is my code
index.html
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="HelloController">
<h2>{{message}}</h2>
</div>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName:{{user.name}}</div>
</div>
</body>
</html>
Script.js
var app = angular.module("myapp", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
});
var httpApp=angular.module("httpService",[]);
httpApp.controller("httpController",function($scope,$http){
var onUserComplete=function(response){
$scope.user=""response.data"";
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
}
);
Only one ng-app will be automatically bootstrapped on your page. That's why if you remove the first ngApp directive, the second one will work.
var httpApp = angular.module("httpService", []);
httpApp.controller("httpController", function($scope, $http) {
var onUserComplete = function(response) {
$scope.user = response.data;
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName: {{user.name}}</div>
</div>
NOTE: You have a typo in your callback, remove ""s around your response.data. Also, since you are using Angular 1.5.6, you don't need to specify dependencies/inject your $http service to make your code work.
https://plnkr.co/edit/LyWCLeBeyHPzjys3LOcr?p=preview
<body ng-app="httpService">
<div ng-controller="httpController">
<div>FirstName: {{user.key}}</div>
</div>
</body>
This link is working fine...just try it out
Do not use ng-app more than once in your program...Your code would not work
I am having troubles with using ng-click. I have added ng-click directive to the button. It does not trigger the function associated with ng-click. In Angular Batarang tool, it says the functions are undefined.
I tried the problem in Plunker.It does work. And also If i hard code the file path it works.
index.html code
<!DOCTYPE html>
<HTML ng-app="myEventApp">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 ng-controller="HelloWorldController">{{ helloMessage }}</h1>
<div ng-controller="EventDetail">
</div>
<div ng-include="" src="fileName"></div>
<!--<ng-include src="fileName"></ng-include>-->
<!--<div ng-include="" src="'template/testing10000.html'"></div>-->
<button ng-click=incrementCounter()>Next</button>
<button ng-click=decrementCounter()>Back</button>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="js/app.js"> </script>
</body>
</HTML>
app.js code
var app = angular.module("myEventApp", []);
app.controller('HelloWorldController', ['$scope', function($scope){
$scope.helloMessage = "Book Viewer";
}]);
app.controller('EventDetail', ['$scope', function($scope){
$scope.counter = 0;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
$scope.incrementCounter = function(){
$scope.counter++;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
console.log($scope.counter);
}
$scope.decrementCounter = function(){
$scope.counter--;
$scope.fileName = 'template/testing1000'+$scope.counter+'.html';
console.log($scope.counter);
}
}]);
You declared the functions inside the EventDetail controller, but you have the buttons outside of the controller container in the html.
<div ng-controller="EventDetail">
<div ng-include="" src="fileName"></div>
<button ng-click="incrementCounter()">Next</button>
<button ng-click="decrementCounter()">Back</button>
</div>