开发者问题收集

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

2016-10-09
1650
javascript jquery html angularjs

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

但问题是当我单击 “提交” 按钮时，它在控制台中显示上述 错误 ，即- 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() 没有启动。 任何帮助都将不胜感激。

3个回答

您的代码的第一个问题是 

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 以防止处理程序的双重执行。

Plunker 。

Ravi Teja
2016-10-09

首先，不要从 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 事件即可。

Pankaj Parkar
2016-10-09

如上回答所述，sub() 应该位于将向视图公开的 $scope 下。普通函数将对该函数保密，并且在视图绑定时不可用。

Reese Davis
2016-10-09