angularjs - how to call angular scope function from javascript function inside controller - Stack Overflow

admin管理员组

文章数量:1355096

I have angular controller and Javascript function in that function , i am calling angular function. I am getting error: $scope.Name is not a function, $scope.dates is not a function.

     function validation() {
            $scope.pageload = true;

            $scope.Name();
            $scope.dates();  
        }

        $scope.Name = function () {
           // do something
        }

        $scope.dates = function () {
          // do something       
        }

working fine inside the controller

    var MyController = function ($scope, service)
    {


       function validation() {

            $scope.pageload = true;

            $scope.Name();
         $scope.dates();

        }

       $scope.Name = function () {


            // do something
        }

     $scope.dates = function () {

            // do something

    }


});


working:


var MyController = function ($scope, service)
{
 LoginHomeService.getHomeService(function (data) {
                $rootScope.CT1SessionObj = data.CT1SessionObj;

                        validation();



                                    }, function (response) {
                                        alert(response.Message);
                                    });

   function validation() {

        $scope.pageload = true;

        $scope.Name();
     $scope.dates();

    }

   $scope.Name = function () {


        // do something
    }

 $scope.dates = function () {

        // do something




});




Not working:

    var MyController = function ($scope, service)
    {
     LoginHomeService.getHomeService(function (data) {
                    $rootScope.CT1SessionObj = data.CT1SessionObj;

                            validation();


   function validation() {

        $scope.pageload = true;

         $scope.Name();
         $scope.dates();

        }

       $scope.Name = function () {


            // do something
        }

     $scope.dates = function () {

            // do something

    }


   }, function (response) {
    alert(response.Message);
   });


   });

I have angular controller and Javascript function in that function , i am calling angular function. I am getting error: $scope.Name is not a function, $scope.dates is not a function.

     function validation() {
            $scope.pageload = true;

            $scope.Name();
            $scope.dates();  
        }

        $scope.Name = function () {
           // do something
        }

        $scope.dates = function () {
          // do something       
        }

working fine inside the controller

    var MyController = function ($scope, service)
    {


       function validation() {

            $scope.pageload = true;

            $scope.Name();
         $scope.dates();

        }

       $scope.Name = function () {


            // do something
        }

     $scope.dates = function () {

            // do something

    }


});


working:


var MyController = function ($scope, service)
{
 LoginHomeService.getHomeService(function (data) {
                $rootScope.CT1SessionObj = data.CT1SessionObj;

                        validation();



                                    }, function (response) {
                                        alert(response.Message);
                                    });

   function validation() {

        $scope.pageload = true;

        $scope.Name();
     $scope.dates();

    }

   $scope.Name = function () {


        // do something
    }

 $scope.dates = function () {

        // do something




});




Not working:

    var MyController = function ($scope, service)
    {
     LoginHomeService.getHomeService(function (data) {
                    $rootScope.CT1SessionObj = data.CT1SessionObj;

                            validation();


   function validation() {

        $scope.pageload = true;

         $scope.Name();
         $scope.dates();

        }

       $scope.Name = function () {


            // do something
        }

     $scope.dates = function () {

            // do something

    }


   }, function (response) {
    alert(response.Message);
   });


   });

• javascript
• angularjs
• angularjs-directive

Share Improve this question Follow edited Jun 2, 2016 at 14:46 Mohamed Sahir asked Jun 2, 2016 at 14:30 Mohamed SahirMohamed Sahir 2,54399 gold badges4949 silver badges7878 bronze badges 6

• 1 Where is all of this code sitting? Is this all inside a controller or ...? – ajmajmajma Commented Jun 2, 2016 at 14:34
• call validation() from somewhee – Alon Eitan Commented Jun 2, 2016 at 14:38
• You may want to create a Plunker: plnkr.co – A.Sharma Commented Jun 2, 2016 at 14:38
• no inside the controller calling the service inside the service rcalling the validation javascript function,In js function calling the angular function. – Mohamed Sahir Commented Jun 2, 2016 at 14:38
• inside the controller working ,for some reasons i have put inside the service reponse – Mohamed Sahir Commented Jun 2, 2016 at 14:38

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

Declare $scope.Name and $scope.dates on top of validation()

Javascript works from top to bottom, so your functions $scope.Name and $scope.Dates do not exist 'yet'.

Also, try not to use 'Name' as a function. Most of these words are reserved keywords.

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

    $scope.Name = function() {
    // do something
  }

  $scope.dates = function() {
    // do something       
  }

  function validation() {
    $scope.pageload = true;

    $scope.Name();
    $scope.dates();
  }
}

Fiddle: http://jsfiddle/Lvc0u55v/4872/

An even better approach would be the 'John Papa style' : Y033

Place bindable members at the top of the controller, alphabetized, and not spread through the controller code.

Why?: Placing bindable members at the top makes it easy to read and helps you instantly identify which members of the controller can be bound and used in the View.

Why?: Setting anonymous functions in-line can be easy, but when those functions are more than 1 line of code they can reduce the readability. Defining the functions below the bindable members (the functions will be hoisted) moves the implementation details down, keeps the bindable members up top, and makes it easier to read.

/* avoid */
function SessionsController() {
    var vm = this;

    vm.gotoSession = function() {
      /* ... */
    };
    vm.refresh = function() {
      /* ... */
    };
    vm.search = function() {
      /* ... */
    };
    vm.sessions = [];
    vm.title = 'Sessions';
}


/* remended */
function SessionsController() {
    var vm = this;

    vm.gotoSession = gotoSession;
    vm.refresh = refresh;
    vm.search = search;
    vm.sessions = [];
    vm.title = 'Sessions';

    ////////////

    function gotoSession() {
      /* */
    }

    function refresh() {
      /* */
    }

    function search() {
      /* */
    }
}

As @Harald Wiesinger mentioned declare called functions prior to calling function.

Put validation after the scope functions

$scope.Name = function () {
   // do something
}

$scope.dates = function () {
  // do something       
}

function validation() {
    $scope.pageload = true;

    $scope.Name();
    $scope.dates();  
}

本文标签： angularjshow to call angular scope function from javascript function inside controllerStack Overflow