Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

I am new to Angularjs, I have created simple web application that takes the details from user and display the details in the view. I am facing problem while invoking a method of one controller from another angular view. Can anyone help me, Thanks.

home.html

  <div id="main">
  <div id="first">
  <form ng-controller="homeController as model" ng-submit="push();">
  <h1>Vehicle Form</h1>
  <h4>Please fill all entries.</h4>
  <br>
 <label>Model :</label>
 <input name="dname" placeholder="Enter Model" type="text" ng-model="model.user.model">
  <br>
 <label>Name :</label>
 <input name="demail" placeholder="Enter name" type="text" ng-model="model.user.name">
 <br>
 <label>Color :</label>
 <input name="demail" placeholder="Enter color" type="text" ng-model="model.user.color">
 <br>
 <label>Price :</label>
 <input name="demail" placeholder="Your Email" type="text"ng-   model="model.user.price">
  <br>
  <input name="dsubmit" type="submit" value="Send">
 </form>
 </div>
 </div>
 <br>
 <br>
 <h1>Vehicle Table </h1>
 <table class="table table-striped table-hover table-users" ng-controller="homeController">
            <thead>
                <tr>

                    <th>Id</th>
                    <th>Model</th>
                    <th>Name</th>
                    <th>Color</th>
                    <th>Price</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>

            <tbody>

                <tr ng-repeat="vehicle in hello">

                    <td>{{vehicle.id}}</td>
                    <td>{{vehicle.model}}</td>
                    <td>{{vehicle.name}}</td>
                    <td>{{vehicle.color}}</td>
                    <td>{{vehicle.price}}</td>
          <td><a class="btn mini blue-stripe" ui-sref="about" ng-click="setValue(vehicle.id)">Edit</a></td>
          <td><a href="#" class="confirm-delete btn mini red-stripe" role="button">Delete</a></td>
      </tr>
    </tbody>

 </table>

home.js (controller file)

 var myapp = angular.module('demo').controller("homeController",    function($scope,myService){

 myService.async().then(function(d){
    $scope.hello=d.data;
 });

 var model=this;
    model.user={
            id:"",
           model:"",
           name:"",
          color:"",
          price:""
        };

     $scope.push = function(){
     myService.saveUser(model.user);
     model.user='';
     }

  });

about.html

<div id="main">
<div id="first">
    <form ng-controller="aboutController" ng-submit="addValue();">
        <h1>Vehicle Edit Form</h1>
        <br>
        <label>Id :</label>
        <input name="id" placeholder="Enter Id" type="text" ng-model="id" value="value.id">
        <br>
        <label>Model :</label>
        <input name="model" placeholder="Enter Model" type="text" ng-model="model" value="value.model">
        <br>
        <label>Name :</label>
        <input name="name" placeholder="Enter name" type="text" ng-model="name" value="value.name">
        <br>
        <label>Color :</label>
        <input name="color" placeholder="Enter color" type="text" ng-model="color" value="value.color">
        <br>
        <label>Price :</label>
        <input name="price" placeholder="Your Email" type="text" ng-model="price" value="value.price">
        <br>
        <input name="update" type="Update" value="Send">
    </form>
  </div>
 </div>

about.js (second controller)

  angular.module('demo').controller("aboutController", function($scope, aboutService) {
  $scope.value;
  $scope.setValue = function() {
     aboutService.getVehicle().success(function (response) {
       $scope.value = studs.data;
     })
  };

$scope.addValue = function () {
  var stud = {
    id:"$scope.id",
    model:"$scope.model",
    name:"$scope.name",
    color:"$scope.color",
    price:"$scope.price"

  };
  aboutService.setVehicle(stud).
  success( function (){
    concole.log("hello");
  })
  };
 });

rest.js(module file)

 var myapp = angular
.module('demo', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'Views/home.html',
            controller: 'homeController'
          })

        .state('about', {
            url: '/about',
            templateUrl: 'Views/about.html',
            controller: 'aboutController'
        })
        .state('contact', {
            url: '/contact',
            templateUrl: 'Views/contact.html',
            controller: 'contactController'
        });

});

homeService.js

myapp.factory('myService',function($http){
var myService={
  async : function(){
    var promise= $http.get('http://192.168.50.127:8080/SpringRestfulVehicleDemo2/vehicle/all').then(function(response){
     return response;
    });
    return promise;
   },
  saveUser : function(userArray){
$http.post('http://192.168.50.127:8080/SpringRestfulVehicleDemo2/vehicle/add ',userArray).success(

   function(userArray,status,headers,config){
  });
 }
};
 return myService;
});

aboutService.js (another service file)

myapp.factory('aboutService',function($http){
var aboutService={};
var   urlBase='http://192.168.50.127:8080/SpringRestfulVehicleDemo2/vehicle/';

 aboutService.getVehicle = function () {
 retun $http.get(urlBase+'/byId/:id');
};
 aboutService.setVehicle= function (){
 return $http.post(urlBase+'/update/:id');
}
return aboutService;
});

What I am doing is getting data from server and displaying data in a table. I want to edit the selected row in another view. I facing an issue when I click edit button in home.html. It should invoke about.js (controller) setValue() method.

share|improve this question
    
how do both of these views relate to each other? is there another HTML file that has both of these views? you can use $broadcast or $emit if you really need to communicate between views, but you are describing a simple master/details view that shouldn't need that. – Claies Jul 21 at 14:20
    
@claies: Yes, I have index.html that has both of these views. both controller belongs to one module. – sri Jul 21 at 14:52

To do this, you need your controllers to communicate to each other. Communication can happen using any of the following methods

  1. Use $emit + $on / $broadcast + $on
  2. Make a service which contains that function and is injected to the controllers which want to communicate with each other.

In your case either you can move the setValue method to a shared service between the controllers using it or you can use method 1.

You already know how to make a service. For method 1 example is given below:

app.controller('One', ['$scope', '$rootScope'
    function($scope) {
        $rootScope.$on("CallParentMethod", function(){
           $scope.parentmethod();
        });

        $scope.parentmethod = function() {
            // task
        }
    }
]);
app.controller('two', ['$scope', '$rootScope'
    function($scope) {
        $scope.childmethod = function() {
            $rootScope.$emit("CallParentMethod", {});
        }
    }
]);
share|improve this answer
    
I followed the second method but It's not working. What I did is I have created a set and get methods in service file, set method called by controller 1 and get method called by controller 2. but data is not coming to controller 2. – sri Jul 22 at 12:03
    
Pls share your code – Rahul Arora Jul 22 at 14:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.