Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am facing issue to print text using angualrjs $scope and $rootscope.
Please find the code below and let me know where i did mistake.
<body ng-app="x">
<div ng-controller="ctrl1">
Hello {{name2}}
</div>
<div ng-controller="ctrl2">
Hi {{name1}} How {{name3}}
</div>
<script>
var app= angulr.module("x",[]);
app.controller("ctrl1" ,['$scope', '$rootScope',function($scope, $rootscope){
$scope.name2 = "Sir";
$rootscope.name3 = "are you!";
}]);
app.controller("ctrl2", function($scope){
$scope.name1 = "madam";
});
</script>
</body>
Please run the following code. Problem solved. You spelled angular incorrectly and you dont need to put scope and rootScope in bracket in ctrl1 in controller. Also it is rootScope and not rootscope (check the capital S)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<body ng-app="x">
<div ng-controller="ctrl1">
Hello {{name2}}
</div>
<div ng-controller="ctrl2">
Hi {{name1}} How {{name3}}
</div>
<script>
var app= angular.module("x",[]);
app.controller("ctrl1" ,function($scope, $rootScope){
$scope.name2 = "Sir";
$rootScope.name3 = "are you!";
});
app.controller("ctrl2", function($scope){
$scope.name1 = "madam";
});
</script>
</body>
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="x">
<div ng-controller="ctrl1">
Hello {{name2}}
</div>
<div ng-controller="ctrl2">
Hi {{name1}} How {{name3}}
</div>
<script>
var app = angular.module('x', []);
app.controller("ctrl1" ,['$scope', '$rootScope',function($scope, $rootscope){
$scope.name2 = "Sir";
$rootscope.name3 = "are you!";
}]);
app.controller("ctrl2", function($scope){
$scope.name1 = "madam";
});
</script>
</body>
</html>
Related
I'm trying to create a new angularjs controller and this error just don't want to dissapear:
Argument 'AppController' is not a function, got undefined
My code:
var app = angular.module('myApp', [])
.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
app.html.twig
<div ng-app="myApp">
<div ng-controller="AppController">
<h1> {{'{{ data }}' }}</h1>
</div>
I really don't understand what am I missing. I ve searched for this error, and I tried the solutions presented but I can not resolve it. Any ideas?
Here is your own code. Please go through it and for more just go to plunker
//JS code
var app = angular.module('myApp', [])
.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
//template code
<div ng-app="myApp">
<div ng-controller="AppController">
<h1> {{data}}</h1>
</div>
</div>
I think you should keep it separate like this, it'll work
var app = angular.module('myApp', []);
OR
var app = angular.module('myApp');
app.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
Also this syntax is wrong but your error is not because of this
<h1> {{'{{ data }}' }}</h1>
Change
<h1> {{ data }}</h1>
Try to create like this
var jimApp = angular.module("mainApp", []);
jimApp.controller('mainCtrl', function($scope){
$scope.data = 'Hello';
});
<div ng-app="mainApp" ng-controller="mainCtrl">
{{ data }}
</div>
var app = angular.module('myApp', [])
app.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="AppController">
<h1> {{data}}</h1>
</div>
</div>
{{'{{ data }}' }} =======> {{data}}
I created a snippet with your provided code and jut this part in html and it's working now. Kindly check this answer.
Thank you.
I can successfully update an Angular expression immediately but it fails upon a button press. I need a little help here.
Here's the code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="MyController">
<button id="myButton">Press</button>
{{myMessage}}
<script>
function setMessage(msg) {
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.myMessage = msg;
});
}
setMessage("first");
$(document).ready(function() {
$('#myButton').on('click', function( event ){
setMessage("second");
});
});
</script>
</div>
</div>
</body>
</html>
The first call which happens right away correctly updates the expression to "first". However the second call when the button is pressed fails to upate the expression to "second". What am I doing wrong?
First of all, good advice: remove jQuery from the project until you understand well why you should not use jQuery-style development with Angular app. Shortly, Angular has a specific event/parsing/compiling lifecycle that is not the same as just the flow we are used in jQuery projects. Take a look at this thread.
Then what you need to do is to use ngClick directive:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyController">
<button ng-click="setMessage('second')">Press</button>
{{myMessage}}
</div>
</div>
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.myMessage = 'first';
$scope.setMessage = function(msg) {
$scope.myMessage = msg;
};
});
</script>
Remove the function around your angular module and you should use angular's ng-click directive to update your html on click:
<div ng-app="MyApp">
<div ng-controller="MyController">
<button id="myButton" ng-click="update('second')">Press</button>
{{myMessage}}
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.myMessage = "first";
$scope.update = function(msg){
$scope.myMessage = msg;
}
});
</script>
</div>
</div>
The documentation for ng-click: https://docs.angularjs.org/api/ng/directive/ngClick
Don't mix jQuery with angularjs, unless is totally needed. See this answer about it
you should use all the events, functions and directives providad by angularjs.
So your coude would look to something like this
<div ng-app="MyApp">
<div ng-controller="MyController">
<button ng-click="setMessage()">Press</button>
{{myMessage}}
<script>
function setMessage(msg) {
angular.module('MyApp', [])
.controller('MyController', function($scope) {
// set the original value for myMessage
$scope.myMessage = "first";
// update with second value
$scope.setMessage = function(){
$scope.myMessage = "second";
}
});
}
</script>
</div>
</div>
Of course you should organize this better, but this is the first approach
The main difference is that if you use the angular events (like ng-click in this case) it will let Angular knows what something has changed and that it has to update/refresh the view.
If you change something with jQuery, unless you force angular to know it (using $scope.$apply()) there is no way that angular knows by itself that the model has changed.
I'm new to AngularJS, just started to learn it like 30 mins ago and trying to practice with some basics to get going. I saw the similar posts with the same error, but could not find the solution.
I have a simple html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/app.js"></script>
</head>
<body ng-app>
<div ng-controller="MyCtrl">
<button ng-click="toggle()">Toggle</button>
<p ng-show="visible">Hello World!</p>
</div>
</body>
</html>
And controller in app.js file:
function MyCtrl($scope) {
$scope.visible = true;
$scope.toggle = function () {
$scope.visible = !$scope.visible;
};
}
When loading the page I have the error in a question.
What can be wrong with that?
You need to define angular module first then add that components like controller, directive, factory, etc. in it, then you need to add that module inside the ng-app directive.
Markup
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<button ng-click="toggle()">Toggle</button>
<p ng-show="visible">Hello World!</p>
</div>
</body>
Code
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope) {
$scope.visible = true;
$scope.toggle = function () {
$scope.visible = !$scope.visible;
};
};
Demo here
Here is my code there are two different applications in which two different controllers but the later one is not running. Why is this happening both of these are two different modules?
<!DOCTYPE html>
<html>
<head>
<title>EggHead IO</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/lib/angular.js"></script>
<script>
var app=angular.module('ctrldemo', []);
app.controller('FirstCtrl', function($scope){
$scope.name="yashdeep",
$scope.age="21"
});
var papa=angular.module('anodemo', []);
papa.controller('anoFirstCtrl', function($scope){
$scope.name="yamini";
$scope.age="22"
});
</script>
</head>
<body>
<div ng-app="ctrldemo" ng-controller="FirstCtrl">
<input type="text" ng-model="greeting"/>
<div>
{{greeting+" "+name+" "+age}}
</div>
</div>
<div ng-app="anodemo" ng-controller="anoFirstCtrl">
<input type="text" ng-model="greeeting">
<div>
{{greeeting+" "+name+" "+age}}
</div>
</div>
</body>
</html>
If you want to run multiple angular apps, you will need to manually bootstrap the apps using angulars .bootstrap()
var app = angular.module('ctrldemo', []);
app.controller('FirstCtrl', function ($scope) {
$scope.name = "yashdeep",
$scope.age = "21"
});
angular.bootstrap(document.getElementById('ctrldemo'), ['ctrldemo']);
var papa = angular.module('anodemo', []);
papa.controller('anoFirstCtrl', function ($scope) {
$scope.name = "yamini";
$scope.age = "22"
});
angular.bootstrap(document.getElementById('anodemo'), ['anodemo']);
You will also need to remove the ng-app from the HTML
<div id="ctrldemo" ng-controller="FirstCtrl">
<input type="text" ng-model="greeting" />
<div>{{greeting+" "+name+" "+age}}</div>
</div>
<div id="anodemo" ng-controller="anoFirstCtrl">
<input type="text" ng-model="greeeting">
<div>{{greeeting+" "+name+" "+age}}</div>
</div>
Fiddle: http://jsfiddle.net/03qj5pwf/
Whether or not this is a good idea, I'm not too sure. I think it would be better to inject the modules into the app.
There can only be one ng-app in a page and angular can only be bootstrapped once.
In order to use separate modules you need to have one master module and inject other modules into it as dependencies
var app=angular.module('ctrldemo', ['anodemo']);
<html ng-app="ctrldemo">
Now you can use controllers, services, directives etc from either module
If you are going to do it at all the best way would be by using a directive. Which is what I did. It's called ngModule. Here is what your code would look like using it:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
I am displaying a string that has HTML code in it:
<div style="font-size: 14px" ng-bind="currentBook.description"></div>
put it displays the HTML code instead of interpreting the elements:
When I use ng-bind and ng-bind-unsafe, it shows nothing.
How can I get the HTML to be parsed?
Addendum
I added a reference to sanitize but ng-bind and ng-bind-unsafe still show nothing:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
Ok, I added the ngSanitize var app = angular.module('app', ['ngSanitize']); and now it works.
It looks like you missed ngSanitize please see demo below
You can find more here
https://docs.angularjs.org/api/ngSanitize/service/$sanitize
var app = angular.module('app', ['ngSanitize']);
app.controller('firstCtrl', function($scope, $sce) {
$scope.currentBook = {
description: "<p>some description</p>"
};
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<div style="font-size: 14px" ng-bind-html="currentBook.description"></div>
</div>
</body>
call apply
$scope.$apply(function () {
$scope.currentBook.description = $sce.trustAsHtml(html);
});