I am using Angular.
In my controller I have:
mainApp.controller('loginBoxController', ['$scope', '$state', 'mainWebService', function($scope, $state, mainWebService) {
$scope.usernameText = "";
$scope.clear_fields = function() {
$scope.usernameText = "";
},
$scope.btnCancel = {
width:'45%',
height:'30px',
roundedCorners: 'all',
click : function(){
$scope.clear_fields();
}
};
}]);
And in my HTML, I have
<div >
<input ng-jqxinput="txtusername" ng-model="usernameText" type="text" id="txtusernameID"/>
</div>
So, where have I gone wrong. Please help me.
Please try this, create new single page app and run it. It will solve your problem.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.18/angular.js"></script>
<script>
var mainApp = angular.module('MyApp', []);
mainApp.controller('loginBoxController', ['$scope', function($scope) {
$scope.usernameText = "";
$scope.clear_fields = function() {
$scope.usernameText = "";
},
$scope.btnCancel = {
width:'45%',
height:'30px',
roundedCorners: 'all',
click : function(){
$scope.clear_fields();
}
};
}]);
</script>
</head>
<body ng-app="MyApp" ng-controller="loginBoxController">
<div >
<input ng-jqxinput="txtusername" ng-model="usernameText" type="text" id="txtusernameID"/>
<input type ="button" value="submit" ng-click="clear_fields()"/>
</div>
</body>
</html>
$scope.$apply() after the $scope.clear_fields();
solved my issue.
$scope.btnCancel = {
width:'45%',
height:'30px',
roundedCorners: 'all',
click : function(){
$scope.clear_fields();
$scope.$apply();
}
};
Related
Hi I am new to Angularjs. I am learning how to share data between two controllers using dataservice. Looking at the tutorial I made my own program but it is not working. Can anyone suggest what I am doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Services</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
</head>
<body>
<div ng-app="dataServiceApp">
<div ng-controller="ChildCtrl">
<h2>First controller</h2>
<button>+</button>{{Holder.value}}
</div>
<div ng-controller="ChildCtrl2">
<h2>Second controller</h2>
<button>+</button>{{Holder.value}}
</div>
</div>
<script>
var myapp = angular.module("dataServiceApp",[]);
myapp.factory('Holder', function() {
return {
value: 0
};
});
myapp.controller('ChildCtrl', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});
myapp.controller('ChildCtrl2', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});
</script>
</body>
</html>
You have forgotten to register onclick listeners to the buttons:
<button ng-click="increment()">+</button>{{Holder.value}}
Hope this helps. Complete working example below:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Services</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
</head>
<body>
<div ng-app="dataServiceApp">
<div ng-controller="ChildCtrl">
<h2>First controller</h2>
<button ng-click="increment()">+</button>{{Holder.value}}
</div>
<div ng-controller="ChildCtrl2">
<h2>Second controller</h2>
<button ng-click="increment()">+</button>{{Holder.value}}
</div>
</div>
<script>
var myapp = angular.module("dataServiceApp",[]);
myapp.factory('Holder', function() {
return {
value: 0
};
});
myapp.controller('ChildCtrl', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});
myapp.controller('ChildCtrl2', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});
</script>
</body>
</html>
p.s. I also fully agree with JB Nizet's comment: check whether you really need to learn AngularJS instead of Angular 2-7/VueJS/React.
I have implemented a form with a particular controller and then after it is storing in a scope object and then after I assigned that scope object to a service property to share n number of controllers. After assignment the data to service property I am redirecting to another page where a form is their and it have some fields but I am unable to show the form in the web page.
Example: index.html:
<body ng-app="app" ng-controller="ctrl_1"> ... ..... </body>
main.js:
var app = angular.module("app",[]);
app.service("myService",function(){
this.Details = "";
this.setDetails = function(details){
this.Details = details;
};
this.getDetails = function(){
return this.Details;
} });
app.controller("ctrl_1",function($scope,myService){ after passing the data in service I redirect to index2.html window.location("index2.html"); });
app.controller("ctrl_2",function($scope,myService){ });
index2.html:
<body ng-app="app" controller="ctrl_2"> ..`enter code here` ....enter code here </body>
In this way I define, but I am unable to run the index2.html page.
You need a routing module such as ngRoute or ui.router. They will help you with redirection to other pages. Here is a quick demo for your scenario:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "index.html"
})
.when("/page2", {
templateUrl: "index2.html"
});
});
app.service("myService", function() {
this.Details = "";
this.setDetails = function(details) {
this.Details = details;
};
this.getDetails = function() {
return this.Details;
}
});
app.controller("ctrl_1", function($scope, myService, $location) {
$scope.redirect = function(path) {
$location.url(path);
}
});
app.controller("ctrl_2", function($scope, myService, $location) {
$scope.redirect = function(path) {
$location.url(path);
}
});
<!DOCTYPE html>
<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js"></script>
<body>
<div ng-view></div>
<script type="text/ng-template" id="index.html">
<div ng-controller="ctrl_1">
Page 1 (index.html)
<br>
<button ng-click="redirect('/page2')">Redirect</button>
</div>
</script>
<script type="text/ng-template" id="index2.html">
<div ng-controller="ctrl_2">
Page 2 (index2.html)
<br>
<button ng-click="redirect('/')">Go back</button>
</div>
</script>
</body>
</html>
I have 2 controllers i want to call a function in one controller in another. I'm using this and I'm not using any $scope. How can i call a function from one controller to another.
var app = angular.module("myapp", []);
app.controller("myctl", function () {
var parent= this;
parent.SayHello = function () {
// code
}
})
app.controller("otherctl", function () {
var child = this;
// how to call sayHello without $scope
})
You cannot, even if you are using $scope.
You cannot inject one controller to another controller.
In order to share the data among the controllers, consider using factory/service.
DEMO
var app = angular.module("clientApp", [])
app.controller("TestCtrl",
function($scope,names) {
$scope.names =[];
$scope.save= function(){
names.add($scope.name);
}
});
app.controller("TestCtrl2",
function($scope,names) {
$scope.getnames = function(){
$scope.names = names.get();
}
});
app.factory('names', function(){
var names = {};
names.list = [];
names.add = function(message){
names.list.push({message});
};
names.get = function(){
return names.list;
};
return names;
});
<!doctype html>
<html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="clientApp">
<div ng-controller="TestCtrl">
<input type="text" ng-model="name">
<button ng-click="save()" > save</button>
</div>
<div ng-init="getnames()" ng-controller="TestCtrl2">
<div ng-repeat="name in names">
{{name}}
</div>
</div>
</body>
</html>
I get this error - Error: $controller:ctrlreg A controller with this name is not registered. All of my scripts are loaded, and I added them all in index.html.
All scripts are loaded
My controller:
(function() {
angular.module("nsoftModule").controller("nsoftController", ["nsoftService", function(nsoftService) {
var self = this;
self.service = nsoftService;
}])
})();
My directive:
(function() {
var weatherMod = angular.module("nsoftModule", []);
weatherMod.directive("nsoftDirective", function() {
return {
templateUrl: "Template/weatherTemplate.html",
controller: "nsoftController as nsoftCtrl"
}
});
})();
My service:
(function() {
var weatherMod = angular.module("nsoftModule", []);
weatherMod.service("nsoftService", ["http", function(http) {
var service = this;
}]);
})();
My module:
(function() {
var weatherMod = angular.module("nsoftModule", []);
})();
My template:
<div class="container">
<div ng-controller="nsoftController">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</div>
My app.js:
(function() {
angular.module("nsoftApp", ["nsoftModule"]);
})();
And my index.html:
<!DOCTYPE html>
<html ng-app="nsoftApp">
<head>
<title>Nsoft App</title>
</head>
<body>
<nsoft-directive></nsoft-directive>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="weatherModule.js"></script>
<script src="Service/weatherService.js"></script>
<script src="Controller/weatherController.js"></script>
<script src="Directive/weatherDirective.js"></script>
<script src="app.js"></script>
</body>
</html>
just remove the global variable because in you are using anonymous self invoking function variable is only limited to one anonymous function. use like his
(function() {
angular.module("nsoftModule").controller("nsoftController", ["nsoftService", function(nsoftService) {
var self = this;
self.service = nsoftService;
}])
})();
(function() {
angular.module("nsoftModule").directive("nsoftDirective", function() {
return {
templateUrl: "Template/weatherTemplate.html",
controller: "nsoftController as nsoftCtrl"
}
});
})();
//change http to $http
(function() {
angular.module("nsoftModule").service("nsoftService", ["$http", function($http) {
var service = this;
}]);
})();
(function() {
angular.module("nsoftModule", []);
})();
since controller assign from the directive no need to declare it in the html also
<div class="container">
<div >
<p>Name : <input type="text" ng-model="nsoftCtrl.name"></p>
<h1>Hello {{nsoftCtrl.name}}</h1>
</div>
(function() {
angular.module("nsoftApp", ["nsoftModule"]);
})();
I am taking date and time from the user input and
<input type="datetime-local" ng-model= "datetime" name="datetime" min="2016-01-01T00:00:00" max="2116-12-31T00:00:00" class="b" required/>
want to appear it in this div <div ng-bind="x.todoTime| date : 'medium'" class="bb"></div> but with the interval of 1000.How should I do it?
Js code:-
var app =angular.module('toDolist', []);
app.controller("toDoCtrl",function($scope, $interval) {
$scope.todoWork = [];
$scope.todoAdd = function() {
$scope.todoWork.push({todoText:$scope.task,todoDesc:$scope.description,todoTime:$scope.datetime,todoPriority:$scope.priority,done:false});
$scope.task ='';
$scope.description ='';
$scope.datetime ='';
$scope.priority ='';
};
$interval(function(){
$scope.datetime;;
},1000);
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Date: <input type="datetime-local" ng-model="datetime" min="2016-01-01T00:00:00" max="2116-12-31T00:00:00" id="myLocalDate" value="2014-11-16T15:00:33" ng-change="changeTimer()">
<h1 ng-bind="timerModel"></h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
var tt;
$scope.datetime= "";
$scope.changeTimer = function(){
$interval.cancel(tt);
var t= angular.copy($scope.datetime);
tt= $interval(function(){
t.setSeconds((new Date(t)).getSeconds()+1);
$scope.timerModel=angular.copy(t);
}, 1000);
}
});
</script>
</body>
</html>