javascript - 我对 AngularJS 做错了什么?

标签 javascript angularjs angularjs-scope

我最近发现了 angularJS 并一直在尝试学习它,所以我将简单的待办事项教程复制到一个 yeoman 生成器 Angular 应用程序中,它恰好工作得很好。但是,当我尝试编写自己的版本时,无法让数据自动更新。

我的 HTML:

<div class="hero-unit">
<ul>
  <li ng-repeat="p in phones">{{p.name}} - {{p.snippet}}</li>
</ul>
  <a href="#" ng-click="addPhone()">click me</a>
</div>

我的 main.js

'use strict';

angular.module('ngApp') .controller("MainCtrl", 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."}
  ];

 $scope.addPhone = function()
 {
    console.log('clicked');
    $scope.phones.push({
        name: "iPhone 5",
        snippet: "Awesome phone man"
    });
 };
});

我还没有修改我的 app.js 但这里是为了以防万一:

'use strict';

angular.module('ngApp', [])
.config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
});

我做错了什么?在我失去理智之前请帮忙。我敢肯定这是我正在寻找的极其简单的东西。但是,当我单击链接时,该项目不会将自身添加到列表中。然而,在初始加载时,列表加载得很好。

最佳答案

您错过了参数列表作为 angular.module() 函数的第二个参数,只需将其更改为

angular.module('ngApp')

angular.module('ngApp', [])

Demo on jsFiddle

关于javascript - 我对 AngularJS 做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17935240/

相关文章:

javascript - 如何返回Parse Query结果进行查看?

javascript - 如何在app.run中使用异步代码?

javascript - 使用 Javascript/html 调暗灯光/更改颜色按钮?

javascript - 快速处理第三方 JavaScript,因此页面不会显得缓慢

javascript - Angular-fullstack 获取当前用户 ID

angularjs - $http.get 、 $http.post 、 $http.put 、 $http.delete $http.head 和 $http.jsonp 之间的区别

javascript - 如何从 Angular JS 中的 ng-repeat 复选框值获取对象

javascript - Firebase 和 Vue Js 生命周期钩子(Hook)

javascript - 通过 AJAX 发布 Django 表单集

javascript - 如何在angular js中应用ng-if