<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.
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 add more than one ng-app in a application ,how to register the both ng-app and let me know what is the use of using more than one ng-app?
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
var app1 = angular.module('app1', []);
app1.controller('Ctrl1', function ($scope)
{
$scope.name = "Angular";
});
var app2 = angular.module('app2', []);
app2.controller('Ctrl2', function ($scope)
{
$scope.name = "Developer";
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="app1">
<div ng-controller="Ctrl1">
<span>{{name}}</span>
</div>
</div>
<div id="app2">
<div ng-controller="Ctrl2">
<span>{{name}}</span>
</div>
</div>
</body>
</html>
Following Code is not showing or updating the value of nam in <p> tag. Kindly help !
<html ng-app>
<head></head>
<body>
<input ng-model = "nam.a" ng-controller = "myControl">
<p> Hello {{nam.a}} </p>
<script>
function myControl($scope){
$scope.nam = {
a : "abcdefg"
};
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
</body>
</html>
You should specify the app module in html page.
<html ng-app="Test">
<body ng-controller = "myControl">
<input ng-model = "nam.a"/>
<p> Hello {{nam.a}} </p>
Then inject the module and controller like as below.
var app = angular.module('Test', []);
app.controller('myControl', function($scope) {
$scope.nam = {
a : "abcdefg"
};
});
In your code there is no ng-app created, ng-controller is binded in wrong way also. This is the right implementation. Look at the example.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myControl">
<input ng-model="nam.a" >
<p> Hello {{nam.a}} </p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myControl', function ($scope) {
$scope.nam = {
a: "abcdefg"
};
});
</script>
</body>
</html>
you should write like this
<body ng-controller="myControl">
<input ng-model = "nam.a">
<p> Hello {{nam.a}} </p>
</body>
https://plnkr.co/edit/M5n5Zb3v3J9W9Mx65cub?p=preview
<html>
<body ng-app="yourAppName">
<div ng-controller="myControl">
<input ng-model="nam.a">
<p> Hello {{nam.a}} </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script>
angular.module('yourAppName', [])
.controller('myControl', function($scope) {
$scope.nam = {
a: 'abcdefg'
}
});
</script>
</body>
</html>
use angular to create a module (in the example, I called it yourAppName), which you reference in the HTML in the ng-app directive
move the ng-controller directive to a parent element for wherever you reference things on $scope
create a controller by using angular.module(...).controller() instead of just creating a random JavaScript function
For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
To anyone else using a node.js backend and not using jade as a template language, I hope this helps!
It would be better to explicitly define the controller inside the module:
var myApp = angular.module("myApp", []);
myApp.controller('IndexCtrl', function($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
});
But.... I copied the code exactly, replaced angular resource path. And all is working.
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
I have written a simple sample custom angular directive and added the directive twice in the HTML.
Below is the sample.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script>
var myDirectives = angular.module('myDirectives', []);
myDirectives.directive('rkitem', function () {
return {
restrict: 'E',
template: '<h4> template text </h4>'
}
});
var myApp = angular.module('myApp', ['myDirectives']);
var ctrl = function ($scope) {
$scope.fname = 'test';
}
myApp.controller('ctrl', ctrl);
</script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="ctrl">
<div class="row">
<rkitem />
<rkitem />
</div>
</div>
</body>
</html>
Expected Output : template text should be displayed twice as rkitem element mentioned twice in HTML
Acutal Output : template text is getting displayed only once
Can anyone please explain why it is getting displayed only once and not twice.
You should add closing tags to your directive elements:
<div class="row">
<rkitem></rkitem>
<rkitem></rkitem>
</div>