I have got two separate divs as shown in the code below. What I am trying to do is update the Controller from first div and then detect the changes in the second div using the same controller. When I press the button, 'i am here' gets printed on the console but the data in 2nd div won't update. It should change to "clicked".
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<h1>Divs below should not be nested</h1>
<div id="notNested1" ng-controller="Controller1">
<button ng-click="buttonClick()">Click me</button>
</div>
<div id="notNested2" ng-controller="Controller1">
<p>{{paragraph}}</p>
</div>
<script type="text/javascript" src="libs/angular/angular.js"></script>
<script>
var app = angular.module('app', []);
function Controller1($scope) {
$scope.paragraph = 'initial';
$scope.buttonClick = function () {
console.log('i am here');
$scope.paragraph = "clicked";
};
}
</script>
</body>
</html>
How can I fix this problem? Also what is the problem here? Is it because the $scope is different for both divs?
Thanks
You should probably share the data using a service/factory.
You could also create a parent controller with the data there, and reference it from the child controllers, but a shared service seems better.
Yes you have 2 separate scopes, so they do not interact with each other.
Related
i want to use ng-app in another ng-app (nested).
and i have controller for each app ,controllers have same name
code is here :
<!DOCTYPE html>
<html>
<head>
<script src="/scripts/angular.js"></script>
<script src="/scripts/Controller1.js"></script>
<script src="scripts/Controller2.js"></script>
</head>
<body ng-app="MasterApp">
<div ng-controller="myController as myCtr">
{{myCtr.testValue}} ---> controler 1
<div ng-app="DetailApp">
<div ng-controller="myController as myCtr">
{{myCtr.testValue}} ----> controller 2
</div>
</div>
</div>
</body>
</html>
Controlle1.js Code :
var MasterApp = angular.module("MasterApp", ["DetailApp"]);
MasterApp.controller("myController", function ()
{
var myCtr = this;
myCtr.testValue = " a value from Master App ";
});
Controller2.js Code :
var DetailApp = angular.module("DetailApp", []);
DetailApp.controller("myController", function ()
{
var myCtr = this;
myCtr.testValue = " a value from Detail App ";
});
now! controller 2 return value of controller 1!
Result :
a value from Master App
a value from Master App
this is my problem, any idea?
Here is what angularjs docs says about, so what you try to do is not possible.
AngularJS applications cannot be nested within each other.
https://docs.angularjs.org/api/ng/directive/ngApp
But some people found a workaround. Check this post
Can I use one ng-app inside another one in AngularJS
I'm learning angularjs. When I learn scope, I see rootScope. But I don't really understand what it is.
For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Family Name {{lastname}} Members:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
</body>
</html>
But I don't understand what's the difference between the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Family Name {{lastname}} Members:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$scope.lastname = "Refsnes";
});
</script>
</body>
</html>
So if there is no difference between scope and rootScope, why do we need to use rootScope?
I hope someone can give me a simple example so that I can understand rootScope easily.
I would like to add to #Yaser answer. I will use google chrome console to explain the $rootScope hierarchy which is inherited by all the scopes in the entire web page.
Step 1: Open chrome web developer tool and select the div with ng-app = "myApp"
Step 2: Goto chrome web developer tool's console and type angular.element($0).scope(), this will fetch you an object containing $rootScope details.
Here you will find a property lastname: "Refsnes"
Step 3: Goto Elements tab and select one of the <li>
Step 4: Type angular.element($0).scope() in the console, this will fetch you and object containing selected scope's details
Expand the parent property and you will find rootScope's property lastname: "Refsnes"
This should explain how $rootScope is inherited by all other scopes on the web page
Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility.
More info here.
However a very simple explanation is consider rootScope and the original parent of all child scopes. If you imagine a hierarchy the rootScope is at the top.
I case of your example there is no rootScope involved, it is just a perent scope.
So you have a lastname in your parent scope, and since ng-repeat creates a child scope, everyone of them has a lastname as well.
The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope.
var app = angular.module('myApp', []);
app.controller('Ctrl1', ['$scope','$rootScope', function ($scope,$rootScope) {
$rootScope.name = "Rahul";
}]);
app.controller('Ctrl2', ['$scope','$rootScope', function ($scope,$rootScope) {
$scope.name = $rootScope.name;
}]);
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div>
<div ng-controller="Ctrl1">
<span>{{name}}</span> - controller -1
</div>
<hr>
<div ng-controller="Ctrl2">
<span>{{name}}</span> - controller -2
</div>
</div>
</body>
</html>
var app = angular.module('myApp',[]) [enter image description here][1] //Here rootScope is created only one time
Check structure from the link: - https://i.stack.imgur.com/rzBj3.png
Here is a simple use of rootScope as passing data from one controlleer to another
It works normally, but doesn't work after an ngClick.
Why is this?
How should this be dealt with if you do want it to work after an ngClick?
It actually works in the snippet below, but doesn't work in this Plunker, and also doesn't work in my app.
It also never works more than once in any of the three places, and I don't know why that is.
angular
.module('app', ['ui.bootstrap'])
.controller('MainController', MainController)
;
function MainController() {
var vm = this;
vm.updateSuccess = false;
vm.closeUpdateSuccess = function() {
console.log('closeUpdateSuccess');
vm.updateSuccess = false;
};
vm.submit = function() {
vm.updateSuccess = true;
};
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap#0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js'></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='MainController as vm'>
<alert ng-show='vm.updateSuccess' type='success' close='vm.closeUpdateSuccess()' dismiss-on-timeout='2000'>
Successfully updated!
</alert>
<h1>Test Text</h1>
<button ng-click='vm.submit()'>Submit</button>
</div>
</body>
</html>
The problem is you are not using the alert directive correctly. It is working as designed and you can see this by looking at the console in your browser. When the page is rendered, two seconds later your logging statement is executed. The alert directive doesn't know or care whether or not it is visible. Angular will execute the directive when it is added to the DOM. For ng-show as you are using, it is only ever added once. You could use ng-if to achieve the desired behavior or, as I say below, ng-repeat if you want the ability to display multiple alerts.
Look at our examples here and see how we're using an array to store them and the HTML code to display them via an ng-repeat.
your are using angular-ui but you are trying to execute native javascript function, try to use the angular in your js file.1 So you need to implement it with so that directive could call it,
<alert type="danger" close='closeUpdateSuccess()' ng-if="show"
dismiss-on-timeout="2000">Something happened.</alert>
and in controller:
$scope.show = true;
$scope.closeUpdateSuccess() = function(index) {
$scope.show = false;
};
i m new in angularjs. But there is problem that i cant resolve it my code is below
My index.html file is given below
<!doctype html>
<html ng-app = "myApp">
<head>
<script src=""https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js""></script>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope){
$rootScope.name = "Ari Lerner";
});
</script>
</head>
<body>
<div>
{{name}}
</div>
</body>
</html>
But still the output on Browser in
{{name}}
please help to solve my problem
I think you made this pretty complex for your self. You need to play with the scope of that moment instead of using the rootScope when their is only one level of scope involved.
However in order to make your example work created a fiddle for the same:
Fiddle
Code Snippet:
HTML:
<div ng-app>
<div ng-controller="test">
{{name}}
</div>
</div>
JS:
function test($scope){
$scope.name = "Ari Lerner";
}
Make sure your angularjs is included properly:
Put double quotes only once:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
demo: jsfiddle
I'm teaching myself Angular and I've looked over a number of examples that show how to bind a model to an HTML input so that they always contain the same text.
I understand that Angular also provides the $location service which works with the URL.
I have an application that I'm thinking of partially rewriting in Angular as a learning example.
In my example, I have an HTML input that I keep synced up with a model using jQuery and also synced up with a hash URL.
Is there a simple way of accomplishing this with AngularJS?
Consider the example application bellow:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
function FirstController($scope, $location) {
var data = {
bar: 'hello world'
};
$scope.data = data
}
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstController">
<input ng-model="data.bar" />
<h2>{{ data.bar }}</h2>
</div>
</div>
</body>
</html>
This is a simple example showing how the model can be kept synced with a textbox. I was wondering if it's possible to keep it synced with a hash URL, as well, so that we would have http://www.example.com#bar=What_The_User_Typed
What you probably need is the $routeProvider
https://docs.angularjs.org/tutorial/step_07