4

编辑：现在我已经实际使用了 angularjs，我不建议任何人做我想要完成的事情。

这是我的第一个 Angularjs 应用程序，所以我是个菜鸟，并且仍在努力解决问题。但是我在我的 chrome 控制台中收到一个错误，上面写着：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.1/$injector/modulerr?p0=app&p1=Error…s.org%2F1.3.0-beta.1%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E...<omitted>...1) angular.min.js?1394393789:6
(anonymous function) angular.min.js?1394393789:6
(anonymous function) angular.min.js?1394393789:30
r angular.min.js?1394393789:7
e angular.min.js?1394393789:29
cc angular.min.js?1394393789:32
c angular.min.js?1394393789:17
bc angular.min.js?1394393789:18
cd angular.min.js?1394393789:17
(anonymous function) angular.min.js?1394393789:208
l jquery-2.0.3.js:2913
c.fireWith jquery-2.0.3.js:3025
x.extend.ready jquery-2.0.3.js:398
S

这将我发送到此页面：http : //docs.angularjs.org/error/$injector/modulerr?p0=app&p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs。 org%2F1.3.0-beta.1%2F$injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E

我不会从 1.2 及以下版本移植任何应用程序。我按照下面的一些简单代码的文档..

这是此代码基于的角度文档：http: //docs.angularjs.org/tutorial/step_02

浏览器中显示的是带有 {{split.description}} 的标题标签。有什么想法吗？

我的 HTML

<html lang="en" ng-app="app">
    <head>
        <!-- My CSS Here -->
    </head>

    <body>
        <div ng-controller="SplitController">
            <div ng-repeat="split in splits">
                <h4>{{split.description}}</h4>
            </div>
        </div>
    </body>

</html>

我的 JavaScript

var Split = function(data)
{
    this.description = data['description'];
}

function getSplits(parentid) {
    var url = "/transaction/split/get";
    var ajax = $.ajax({
        type: 'GET',
        dataType: 'json',
        url: url,
        data: {
            parentid: parentid
        },
        beforeSend: function(data){
        },
        success: function(data){
            data = JSON.parse(data, true);
            var splits = [];
            for(var i = 0; i < splits.length; i++)
            {
                splits.push(new Split(splits[i]));
                console.log(splits[i]);
            }
            var app = angular.module("app", []);
            app.controller('SplitController', function($scope){
                $scope.splits = splits;
            });
        },
        error: function(data){
            //$('body').html(JSON.stringify(data));
        }
    }).done(function(data){
        });
}

$(document.ready(function(){
    getSplits(1);
});
4

5 回答 5

2

由于其他人已经说明的原因，我真的不建议这样做，但是您始终可以在某些 jquery 处理程序中获取给定元素的角度 $scope 的句柄。只需像任何人通常那样定义您的控制器（在脚本的主体中）。

success: function(data){
  ... //splits and whatnot
  var $scope = angular.element($("div[ng-controller='SplitController']")).scope()
  $scope.$apply(function(){
    $scope.splits = splits;
  })
}

您不能像现在这样定义控制器，因为 ng-app 将在 document.ready 上运行。它将寻找您使用 ng-controller 指定的尚未定义的控制器。你可以定义一个不初始化'splits'或任何数据的SplitController，因为ng-repeat 将监视'splits' 的变化并保持DOM 是最新的。

于 2014-03-09T22:07:38.503 回答
1

您以错误的方式混合了 Angular 和 jQuery 代码。在进行 Angular 编程时，您应该将 jQuery 视为低级。不需要document.ready- 角度会为你做。另一方面，您应该定义一个应用程序模块并将其名称放入ng-app指令中。所有其他的东西，比如控制器，都是在那个模块上定义的。

于 2014-03-09T19:57:53.513 回答
0

这是笔误...

ng-app"app"

显然需要..

ng-app="app"

另外，我不会等到您的 ajax 调用完成来引导 angular。您应该只在页面加载时执行此操作，并考虑使用角度工具进行 ajax 调用，例如 $http 服务和可能的 ngRoute 解析属性

于 2014-03-09T19:59:43.860 回答
0

您的代码甚至与您所说的基于的代码都不接近。您不应该使用 document.ready，不应该使用 $.ajax，并且您的控制器应该是发出 ajax 请求的人，而不是 ajax 请求的结果本身。

第 2 步的代码如下所示：

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

phonecatApp.controller('PhoneListCtrl', function($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

如果您想改用 ajax，您应该将$http服务注入您的控制器并使用它。

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

app.controller('SplitController', function($scope, $http) {
  $http.get( // or post, put, delete
      '/transaction/split/get', 
      {some data}
  ).success(function(returndata) {
    $scope.splits = returndata;
  });
});
于 2014-03-09T20:24:40.760 回答
0

如果有人使用$routeProvider，以下可能是错误：

在我的情况下，我$routeProvider.when({})没有使用 url 作为第一个参数，就是这种情况，当我添加如下所示的 url 时，错误就消失了。

$routeProvider.when('/post/:id', {
   templateUrl: 'views/post.html',
   controller: 'PostController'
})
于 2018-11-28T15:41:12.553 回答