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
Related
I created an empty MVC5 web application and trying to display a message in the view which is returned from the external javascript file.
#{
ViewBag.Title = "Index";
Layout = null;
}
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="~/Scripts/myscript.js"></script>
<title>My AngularJS Page</title>
</head>
<body>
<div ng-controller="myController">
{{ message }}
</div>
<div></div>
</body>
</html>
I have created my angularjs code in external js file and referenced it in my view.
var myApp = angular.module('myModule', []);
var myController = function($scope)
{
$scope.message = "Hello from AngularJS";
}
myApp.controller("myController", myController);
Instead of displaying "Hello from AngularJS" its just displaying {{ message }} , any clue on what i am missing here ?
ng-app="myApp" is wrong. your module name is myModule. then you should replace it to ng-app="myModule".
I am trying to call one angular js function using controller. I am using code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DevPortal</title>
<script src="js/angular.min.js"></script>
<script src="js/controllers/app.js"></script>
</head>
<body ng-app="devportal">
<div ng-include="'templates/login_menu.html'"></div>
</body>
</html>
app.js
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
return{
getuserloginmenu : function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})},
getuserloginmenu1 : function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})}
};
});
login_menu.html
<div ng-controller="AppController as ctrl">
<div on-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
My rest service is working properly and returns String array. I am not able to call/get the rest service data in html.
Your code seems legit, the only thing making noise (at least for me) is the on-init you added to call the function. I think that's the problem.
Try
<div ng-controller="AppController as ctrl">
<div ng-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
And maybe.. To keep it clean: Change the syntax of the controller (even if it works)
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
});
Edit:
That's a missuse of ng-init. I'll leave the documentation of Angular for that matter
https://www.w3schools.com/angular/ng_ng-init.asp
But shortly, you want $scope.loginmenu to populate. You don't need to wait until the div loads. You can populate $scope.loginmenu right away when the controller inits.
View
<div ng-controller="AppController as ctrl">
<div>
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
Controller
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
$scope.getuserloginmenu();
});
<html>
<head>
<title>
</title>
<script src="../../angular.min.js"></script>
<script type="text/javascript">
myApp = angular.module('myApp', []);
myApp.controller("empController", function($scope){
$scope.ename = {nm : "Harry"};
$scope.changeName = function(){$scope.ename.nm = "Ron";};
});
myApp.directive("empDirective", function(){
return {
scope : {employeeName : "=myEmpName", nameChange : "&click"},
template : 'Employee Name is {{employeeName.nm}}. <button ng-click="nameChange()">Change Name</button>'
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="empController">
<div emp-directive myEmpName="ename" click="changeName()" > </div>
{{ename.nm}}
</div>
</body>
When I am running the above code I am not getting the employeeName.nm value inside directive. Not sure what I am missing. I am new in AngularJS
In your template, change
myEmpName
to
my-emp-name
Angular requires hyphen separated attributes in templates and converts them to camel case itself via a process called normalisation.
I have following angular code
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Test : {{mytest()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name= "John ";
$scope.mytest = function () {
console.log('my test');
return 'something';
};
});
</script>
</body>
</html>
For more detail, please refer to http://plnkr.co/edit/UIu50AOLMwKIJnAphIB5
Problem: when view in Chrome browser 'Inspect Element' console, the function 'my test' is called 3 times! Why ?
Because you've asked angular to do that. This expression
{{mytest()}}
Is in fact instruction:
"angular, do check if the result value of mytest() is not changing. And do that regularly".
And angular is checking that few times, to be sure that it is not changed. And later, in some other digest it will do the same again
so, rather trigger that method once, and let angular to watch the resulting expression, like with a name above
{{name}}
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.