Menu
I was reading this article on Angular validation and thought it would be good to use in my own project. It's working really well and I'd like to extend it accessing methods in other controllers upon successful validation of the form. I've tried various ways of doing this but I can't seem to see the methods in the $scope object.
<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]"
data-semver="3.0.0"
rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script data-require="[email protected]"
data-semver="1.0.8"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="rcSubmit.js"></script>
<script src="loginController.js"></script>
<script src="loginApp.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
<h1>Simple Login Form</h1>
<form name="loginForm" novalidate
ng-app="LoginApp" ng-controller="LoginController"
rc-submit="login()">
<div class="form-group"
ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.username)}">
<input class="form-control" name="username" type="text"
placeholder="Username" required ng-model="session.username" />
<span class="help-block"
ng-show="loginForm.username.$error.required">Required</span>
</div>
<div class="form-group"
ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.password)}">
<input class="form-control" name="password" type="password"
placeholder="Password" required ng-model="session.password" />
<span class="help-block"
ng-show="loginForm.password.$error.required">Required</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right"
value="Login" title="Login">
<span>Login</span>
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I was hoping that someone can tell me what I'm missing in order to make this work. I've forked a plunkr.
558
An AngularJS application can contain one or more controllers as needed, in real application a good approach is to create a new controller for every significant view within the application.
Approach: To share data between the controllers in AngularJS we have two main cases: Share data between parent and child: Here, the sharing of data can be done simply by using controller inheritance as the scope of a child controller inherits from the scope of the parent controller.
The other way of passing the data from Controller to View can be by passing an object of the model class to the View. Erase the code of ViewData and pass the object of model class in return view. Import the binding object of model class at the top of Index View and access the properties by @Model.
14) Which of the following is used to share data between controller and view in AngularJS? Answer: B: "using services" is the correct answer.
The proper way to do this would be with an angular service. For example:
app.factory('svc', function () {
var msg="original...";
return {
setMessage: function(x) {
msg=x;
},
getMessage: function() {
return msg;
}
};
});
This way you can access the fucntions inside svc in any controller that you inject svc into:
app.controller("ctrl1",function($scope,svc,$timeout){
$scope.someText=svc.getMessage();
$scope.$watch("someText",function(v){
svc.setMessage(v);
});
});
app.controller("ctrl2",function($scope,svc){
$scope.msg=svc.getMessage();
$scope.$watch(svc.getMessage,function(v){
$scope.msg=v;
});
});
See this demo plunk (I ignored that plunk you provided because it had a lot of noise).
EDIT
Executing the service method and form validation are not really related to each other, see plunk.
EDIT
If you want to use the services or controllers of one app inside another, just reference the dependencies in your main app and call the services defined in your main app inside your second app. If your main app is called demoApp1, then you could create another app called dempApp2 and reference demoApp1 in demoApp2 and use any services defined in demoApp1 inside demoApp2. See the plunk I've updated it to demonstrate what you're asking.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
