【问题标题】:What am I doing wrong with AngularJS?我在 AngularJS 上做错了什么?
【发布时间】:2013-07-29 22:23:32
【问题描述】:

我最近发现了 angularJS 并一直在尝试学习它,所以我将简单的 todo 教程复制到一个 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: '/'
  });
});

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

【问题讨论】:

  • 我忘了提到“点击”确实会记录到控制台。

标签: javascript angularjs angularjs-scope


【解决方案1】:

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

angular.module('ngApp')

angular.module('ngApp', [])

Demo on jsFiddle

【讨论】:

  • 谢谢,但它仍然无法在我的计算机上运行。我正在使用 grunt,来自 angularjs 网站的示例运行良好……我要疯了吗?
  • @user2554434 我更新了演示。尝试使用完全相同的角度模块实例来注册控制器和路由。
  • 感谢您的所有帮助。最终解决问题的唯一方法是从 a 属性中删除 href="#" 。是否有任何具体原因阻止它工作?我想为将来学习以避免再次犯这个错误。还是谢谢你。
  • 是的,href 没有使用 angularjs 的路由范围,应该始终设置为空。
猜你喜欢
  • 2021-03-24
  • 2019-11-19
  • 1970-01-01
  • 1970-01-01
  • 2011-11-06
  • 2016-12-28
  • 1970-01-01
  • 2011-06-01
  • 1970-01-01
相关资源
最近更新 更多