ANGULARJS / JAVASCRIPT：錯誤-未捕獲的ReferenceError：函數未定義

Question

我是angularjs和javascript的新手。 我正在使用以上兩種技術構建“博客”。 我的html查看代碼-

<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>

但是問題是當我單擊“ SUBMIT”按鈕時，它在控制台中顯示了上述錯誤 ，即-Uncaught ReferenceError：sub未定義

我的控制器代碼-

(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');

           }

            }
  })();

因此，基本上，onclick事件沒有響應，即功能sub（）沒有啟動。 任何幫助將不勝感激。

Answer 1

首先不要從Angular模板中調用正在修改控制器$ scope（context）變量的全局函數。 它不會更新綁定，因為它不會啟動角度摘要系統來更新綁定。

請使用ng-click代替onclick並在$scope公開該控制器功能，以便可以在模板上訪問它。

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
}

模板

ng-click="sub()"

但是，由於您已經在ng-submit上調用了sub ，因此不必在click再次調用它，因此只需從button刪除onclick事件button 。

Answer 2

您的代碼的第一個問題是

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

如果您尚未在其他地方聲明portal模塊，則必須使用它

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

然后將sub分配給$scope以便可以從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');
 }

您可以刪除 onclick='sub()' ，如果在form上執行ng-submit ，甚至不需要ng-click事件。

建議在表單中使用ng-click或ng-submit ，以防止重復執行處理程序。

柱塞 。

Answer 3

如上回答，sub（）應該在$ scope下，它將顯示給視圖。 普通函數將對該函數私有，並且在視圖綁定時將不可用。