Im trying to show an Angularjs's variable value in HTML with the following code:
<div ng-controller="MyTextbox">
<p>Fecha de ultima actualizacion: {{nodeID1}} </p>
Here is the code for my angularjs controller:
angular.module("umbraco").controller("MyTextbox", function ($scope,$routeParams) {
$scope.nodeID1 = "Hello World";
});
But nothing display this way.
Any help?
You need to write ng-app="umbraco"before ng-controller directive, or write it on body/html tag would be preferable.
Markup
<div ng-app="umbraco" ng-controller="MyTextbox">
<p>Fecha de ultima actualizacion: {{nodeID1}} </p>
</div>
and your app should be
angular.module("umbraco",[]).controller("MyTextbox", function ($scope,$routeParams) {
$scope.nodeID1 = "Hello World";
});
Note
If $routeParams has not added mistakenly then your app would be
angular.module("umbraco",['ngRoute']) then you need to additionally add angular-route.js
Try:
<!DOCTYPE>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module("umbraco",[]).controller("MyTextbox", ['$scope', function ($scope, $routeParams) {
$scope.nodeID1 = "Hello World";
}]);
</script>
</head>
<body >
<h1>My Textbook</h1>
<div ng-app="umbraco" ng-controller="MyTextbox">
<p>Fecha de ultima actualizacion: {{nodeID1}}</p>
</div>
</body>
</html>
Related
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>
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'm a beginner, I have a simple Angular JS that's not working, I don't understand why, here is my code (the two files index.html & script.js are in the same folder):
index.html :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<body ng-app>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<div ng-controller="MainController">
{{message}}
</div>
</body>
</html>
script.js :
var MainController = function($scope) {
$scope.message = "Hello";
};
The ng-model is working, the name that I write in the textbox gets displayed, but I get {{message}} instead of the actual message Hello that I have in the scope of the controller.
Thank you in advance.
Name your app
<body ng-app="myApp">
Create an app.js
var app = angular.module("myApp", []);
Rename script.js to MainController.js , (Don't have to, but for a clean development)
app.controller('MainController', ['$scope', function($scope) {
$scope.message = "Hello";
}]);
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>
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)