ANGULARJS / JAVASCRIPT：错误-未捕获的ReferenceError：函数未定义

Question

I am new to angularjs and javascript . I am building a 'blog' using the above two technologies. My html view code-

<div ng-controller="Controller1">
<form  ng-submit="sub()" role="form">
Title: <textarea >

</textarea><br>
Body:
<textarea rows="10" cols="50">

</textarea><br>
Author:
<textarea>

</textarea><br>

 <button type="submit" onclick='sub()' >Submit</button>

</form>

but the problem is when I click on the "SUBMIT" button , it shows the above error in the console ie- Uncaught ReferenceError: sub is not defined

my controller code-

(function () {
    'use strict';

    angular
        .module('portal')
        .controller('Controller1', Controller1);

    Controller1.$inject = [ '$rootScope'];
    function Controller1($rootScope,$location) {

     var blog= { "article":
            [
        {
        "title": "Blog Post One",
        "body": [
          "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deleniti quae, neque libero voluptate maiores ullam unde voluptatem assumenda velit dolores impedit quis qui! Neque, cupiditate labore nulla? Atque, tenetur.",
          "Numquam nobis nam voluptas blanditiis eveniet in quasi possimus voluptatem temporibus doloremque delectus dolorum, voluptatum laborum aut dolorem? In rerum necessitatibus soluta incidunt nihil numquam fugit quas pariatur dolores nesciunt?",
          "Quibusdam placeat quisquam iure repellendus ad in, nihil numquam quaerat, facere alias illo. Tempora perferendis incidunt, ratione eveniet esse earum, corporis sit? Modi enim commodi odio placeat minus, error id?",
          "Corrupti voluptates asperiores ratione laudantium, eveniet molestiae possimus deleniti officia, incidunt quae et. Amet, ducimus eum ipsa reprehenderit ad, et nihil, veritatis ea doloremque ab placeat dolore impedit, quia eius."
        ],
        "author": "Nick Moreton",

         },
        {
        "title": "Blog Post Two",
        "body": [
          "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deleniti quae, neque libero voluptate maiores ullam unde voluptatem assumenda velit dolores impedit quis qui! Neque, cupiditate labore nulla? Atque, tenetur.",
          "Numquam nobis nam voluptas blanditiis eveniet in quasi possimus voluptatem temporibus doloremque delectus dolorum, voluptatum laborum aut dolorem? In rerum necessitatibus soluta incidunt nihil numquam fugit quas pariatur dolores nesciunt?",
          "Quibusdam placeat quisquam iure repellendus ad in, nihil numquam quaerat, facere alias illo. Tempora perferendis incidunt, ratione eveniet esse earum, corporis sit? Modi enim commodi odio placeat minus, error id?",
          "Corrupti voluptates asperiores ratione laudantium, eveniet molestiae possimus deleniti officia, incidunt quae et. Amet, ducimus eum ipsa reprehenderit ad, et nihil, veritatis ea doloremque ab placeat dolore impedit, quia eius."
        ],
        "author": "Nick Moreton",

        }


        ]
          };
          console.log('here');

            function sub(){

           localStorage.setItem('myStorage', JSON.stringify(blog));
            console.log('in sub');
            var obj = JSON.parse(localStorage.getItem('myStorage'));
            console.log('stored');
           $location.path('/another2.view');

           }

            }
  })();

So basically the onclick event isn't responding ie the function sub() is not getting initiated. Any help will be appreciated.

Answer 1

First thing don't call global function from Angular template which are modifying controller $scope(context) variables. It would not update bindings as it will not initiate angular digest system to update bindings.

Do use ng-click instead of onclick & expose that controller function in $scope so that it can be accessible on template.

Controller1.$inject = [ '$scope', '$location'];
function Controller1($scope, $location) {

   //Inject $scope in dependency array
   $scope.sub = sub; //add this line inside controller
   //other code as is
}

Template

ng-click="sub()"

But as you already calling sub on ng-submit you don't have to call it again on click , so just remove onclick event from button .

Answer 2

First problem with your code is

angular.module('portal').controller('Controller1', Controller1);

If you have not already declared portal module somewhere else, you have to use this

angular.module('portal', []).controller('Controller1', Controller1);

then assign sub function to the $scope so that it will be accessible from the view

 $scope.sub = function sub() {
     alert("sub function called");
     localStorage.setItem('myStorage', JSON.stringify(blog));
     console.log('in sub');
     var obj = JSON.parse(localStorage.getItem('myStorage'));
     console.log('stored');
     $location.path('/another2.view');
 }

You can remove the onclick='sub()' and don't even need ng-click event if you have ng-submit on form .

It is recommended , within a form you should either use ng-click or ng-submit in order to prevent double execution of the handler.

Plunker .

Answer 3

As above answered, sub() should be under $scope which will expose to the view. Normal function will be private to that function and will not available at view binding.