When I inspect $scope I see firstForm but I don't see secondForm in the object. I am at a loss as to why this is happening.
Here's the sandbox code:
index.html
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var firstController = function ($scope){ };
</script>
</head>
<body>
<div ng-controller="firstController">
<form name="firstForm"></form>
<div ng-include="'second_form.html'"></div>
</div>
</body>
</html>
second_form.html
<form name="secondForm"></form>
Thanks to #charlietfl for this suggestion:
Might consider a simple directive to switch with ng-include that just has templatetUrl then won't have that child scope
index.html
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var myModule = angular.module('myModule', []);
myModule.directive('secondForm', function () {
return{
templateUrl: 'secondform.html'
}
});
var firstController = function ($scope){
console.log($scope);
};
</script>
</head>
<body>
<div ng-controller="firstController">
<form name="firstForm">
</form>
<div second-form></div>
</div>
</body>
This works!
ng-include will create another $scope. If you want firstController() to handle both forms the do the following:
<div>
<form ng-controller="firstController" name="firstForm"></form>
<div ng-include="'second_form.html'"></div>
</div>
Then in second_form.html do:
<form ng-controller="firstController" name="secondForm"></form>
use other controllers in for ng-include directives.
In secondForm.html specify controller name as
<div ng-controller="secondCtrl">
</div>
So wen you use ng-inculde inside main controller all controllers of the subtemplates inside ng-include will inherit from the main controller,i.e it will have parent-child relationsship..
More more info go to this link
ng-include and ngRoute: how to make them work together? (i.e. route to a view wihin a ng-include)
Related
It seems very simple but i could not fix it, my controller can not read ng-model related to input box inside ng-view. here are my codes
main.html
<html ng-app="myapp" ng-controller="main_controller">
<head>
<title>test</title>
</head>
<body>
<section ng-view>
</section>
<!--Jquery-->
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../angularjs/angular.js" type="text/javascript"></script>
<!--Angular js-->
<script src="../angularjs/angular-route.js" type="text/javascript"></script>
<script src="../app.js" type="text/javascript"></script>
</body>
</html>
view.html
<input type="text" ng-model="input_value">
<button ng-click="read_input()">print</button>
app.js
var app = angular.module('myapp', ['ngRoute'])
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'view.html',
})
})
app.controller('main_controller', function ($scope) {
angular.element(document).ready(function () {
//some Ajax request
})
$scope.read_input = function () {
console.log($scope.input_value)
}
})
When i write anything inside input box and press print button, it should prints data in the console log, but it gives me undefined.
i know that i didn't provide controller at config of routeProvider but i included ng-controller at top of page it is because i want to use one controller for all of my views,as you see i have ajax request when the document is fully loaded, if i provide same controller for each page in the routeProvider at each chang of view my ajax will be called and i don't want this. Is there a better solution?
Try Below. Your controller scope is not reaching html.
<div ng-controller="main_controller">
<input type="text" ng-model="input_value">
<button ng-click="read_input()">print</button>
</div>
This does not seems duplicate of
AngularJS access scope from outside js function, as I don't want this variable access on any click!
I have AngularJS code in my Maincontroller.js is
<div ng-controller = "Maincontroller">
$scope.name = "Hello";
</div>
In My main.HTML file, I have JavaScript code where I want this $scope.name value:
<html>
<script>
// But this seems not possible with {{ name}}
</script>
</html>
Is there any possibilities to access this $scope variable in JavaScript code?
Can you please check below code. What I did is I posted the name on the UI and with the help of id I fetched the value from the javascript code with the help of getElementById and innerHTML.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body >
<div ng-app="app" ng-controller="Maincontroller">
Angualr Scope: <h1 id="name">{{name}}</h1>
</div>
<div>
A button to call a function from simple javascript function: <button onclick="getData()">Get Data: </button>
</div>
<script src="../lib/angular.js"></script>
<script>
var getData = function(){
var name = document.getElementById('name');
console.log(name.innerHTML);
}
</script>
<script>
var app = angular.module('app', []);
app.controller('Maincontroller', function ($scope) {
$scope.name = "Hello";
});
</script>
</body>
</html>
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 had already declared my app and controller in separate file and below is how i am loading my controller html DOM but it is not showing that message. Can someone please guide how to achieve this.
HTML:
<div id="bnProblemList">
<div ng-controller="problemListCtrl" data-ng-init="init()">
<div ng-view="">this is my message = {{message}}</div>
</div>
</div>
JS:
html = $j('#bnProblemList').html();
$compile(html)(scope);
Please let me know how to inject or load ng-controller html dynamically.
Your controller declaration is wrong. You should do it like this:
var myApp = angular.module('myApp',[]);
myApp.controller('problemListCtrl', ['$scope',
function($scope) {
$scope.message = "This is my message :-)";
}
]);
A proper way is to declare your Controller into an anonymous function, and add it to a module. Then, you have to set your ngApp.
Controller.js
Here, we will declare our controller, and create an app module. Then, we will declare ctrl as our controller into our app module.
(function(){
function Controller($scope) {
$scope.name = 'toto';
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
HTML
<body ng-app='app' ng-controller="ctrl">
<p>My name is {{name}}</p>
</body>
And don't forget to include your script tag :
<script src="controller.js"></script>
You can try Like below Example:-
Html Page:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title> Controller</title>
<script src="../Js/angular.min.js"></script>
<script src="../Js/Controller.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
{{ Msg }}
</div>
</body>
</html>
ControllerJs Page:
var MyApp=angular.module("MyApp",[]);
MyApp.controller("MyFirstController",function($scope){
$scope.Msg="Hello First Conroller";
})
i was able to load/ inject controller dynamically by the help of below code
<div id="bn" ng-controller="myCtrl as vm">
<div ui-view=''></div>
</div>
<script>
angular.element(document).injector().invoke(function($compile, $state) {
$state.go('myCtrl');
var scope = angular.element($j("#bn")).scope();
$compile($j("#bn"))(scope);
});
</script>
In my html page I get the below error
Error: [ng:areq] Argument 'quickReportController' is not a function, got undefined
I searched and found a lot of solutions but not none of them was helping
The html file
<html>
<head>
...
<script src="~/Scripts/jquery-2.1.3.js"></script>
...
<script src="~/Scripts/angular.js"></script>
<script>
</script>
</head>
<body style="font-family: tahoma;" ng-app>
<div class="container bootcards-container" ng-module="myModule">
<div class="row" ng-controller="quickReportController">
<h3>{{name}}</h3>
</div>
</div>
<script type="text/javascript">
(function () {
var module = angular.module('myModule', []);
module.controller("quickReportController", ['$scope', function ($scope) {
$scope.name = "dd";
}]);
}());
</script>
</body>
</html>
you have missed to define ng-app, it should be ng-app='myModule',
only using
<body style="font-family: tahoma;" ng-app>
will try to find global controller named quickReportController, ehich is not global.
Replace with this:
<body style="font-family: tahoma;" ng-app='myModule'>
Also You are trying to define ng-module and nd ng-app, so read this https://stackoverflow.com/a/22865917/3556874
Have you tried to use ng-app="myModule" and remove ng-module from your html?