Angular.js"没有对象"添加ng-app名称时出错

时间:2014-07-13 08:39:17

标签: javascript angularjs

当我为ng-app属性添加名称时,我无法弄清楚为什么Angular会抛出错误。

Chrome中的错误是“未捕获的对象”,位于angular.js的第36行function minErr(module) {

我正在使用缩小的角度库from googleapis

如果我只是<html ng-app>,则没有错误。只要我<html ng-app="app">,Angular就不再有效了。

编辑: 添加我的代码。

HTML

```

<html lang='en' ng-app=''>
  <head>
    <title>Show</title>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
    <meta content="authenticity_token" name="csrf-param" />
    <meta content="OTLcsbbFM0FzoPfIWnn8SDke6kTDnVSTG+EuP8SjQC0=" name="csrf-token" />

    <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />

    <!-- Touch icon (uncomment if needed) -->
    <!-- %link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' } -->
    <!-- Placed at the top of the document 'cause of turbolinks -->
    <script data-turbolinks-track="true" src="/assets/i18n.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/i18n/translations.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/turbolinks-spinner.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/twbs.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <!--[if lte IE 8]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <script src="/assets/respond.js"></script>
    <![endif]-->
  </head>
 <div class='container' id='main-container'>
      <!-- <script src="/sortable.js" /> -->
      <script>
        function PlansCtrl($scope){
          $scope.plan = {"id":1,"name":"Sample plan — four days a week","plan_blocks":[{"id":1,"name":"Monday","set_templates":[{"id":3,"exercise_id":14,"exercise_name":"Power Clean","weight":100,"reps":2},{"id":7,"exercise_id":14,"exercise_name":"Power Clean","weight":10,"reps":5},{"id":4,"exercise_id":17,"exercise_name":"Hang Clean","weight":100,"reps":2},{"id":5,"exercise_id":19,"exercise_name":"Push Up","weight":2,"reps":2},{"id":6,"exercise_id":21,"exercise_name":"Pull Up","weight":5,"reps":5}]},{"id":15,"name":"Tuesday","set_templates":[]}]}
        }
      </script>

      <p id="notice"></p>

      <h3>Sample plan — four days a week
      <br /><small>There are 2 blocks in this plan.</small>
      </h3>

      <p>
        <a href="/plans/1/plan_blocks/new">
        <button type="button" class="btn btn-default">Add a block</button>
      </a></p>
      <hr />
      <div ng-controller="PlansCtrl">

        <a ng-repeat-start="block in plan.plan_blocks" href="/plan_blocks/{{block.id}}">{{block.name}}</a>
          <a href="/plan_blocks/{{block.id}}/set_templates/new">
            <button type="button" class="btn btn-default">Add a set</button>
          </a>
          <div class="table-responsive" ng-repeat-end>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Exercise</th>
                  <th>Weight</th>
                  <th>Reps</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-if="block.set_templates.length == 0"><td colspan=3>No sets</td></tr>
                <tr ng-repeat="set_template in block.set_templates">
                  <td>{{set_template.exercise_name}}</td>
                  <td>{{set_template.weight}} kg</td>
                  <td>{{set_template.reps}}</td>
                </tr>
              </tbody>
            </table>
          </div>

      </div >

```

2 个答案:

答案 0 :(得分:2)

您需要创建appModule才能使用命名应用。

<html ng-app="App">
  <head>
  <script>
    var app = angular.module('App',[]);
    app.controller("PlansCtrl", function($scope) {
     $scope.plan = {"id":1,"nam ....
    });
   </script>
   </head>
   <body ng-controller="PlansCtrl"></body>
</html>

答案 1 :(得分:0)

我建议在第78行的angular.js文件中添加一个断点

return new Error(message);

并查看消息以查看错误。

你也可以在Chrome控制台上使用F12来查看是否有错误。

另外请确保在app.js中更改应用名称

第二行:

 angular.module('App',