Ruby on rails angularjs-添加依赖项会破坏数据绑定

我是

angularjs

的新手，对于

数据绑定

和

依赖注入

是如何工作的，我感到非常困惑

为了测试代码是否有效，我创建了一个测试表达式，

5+5

。如果我不在模块内部注入依赖项，它就可以工作，但是如果我注入依赖项，它就不能工作

我正在使用RubyonRails。下面是示例代码

欢迎使用.index.erb

<div class="col-md-4 col-md-offset-2">
  <ul class="list-inline" ng-app="my-app" ng-controller="HomeCtrl">
    <li><a ng-href="/api/auth/sign_in">Sign In</a></li>
    <li><a ng-href="/api/auth/sign_up">Sign Up</a></li>
    <li>Help</li>
    <li>{{5+5}}</li>
  </ul>
</div>
<script>
  angular.module("my-app", [])
    .controller("HomeCtrl", function($scope) {
    $scope.number = 1;
  });
</script>

数据绑定看起来好像被破坏了，列表项被呈现为

{{5+5}}

用户会话/new.html

<form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm = {}">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email"
           name="email"
           id="email"
           ng-model="loginForm.email"
           required="required"
           class="form-control">
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password"
           name="password"
           id="password"
           ng-model="loginForm.password"
           required="required"
           class="form-control">
  </div>

  <button type="submit" class="btn btn-primary btn-lg">Sign in</button>
</form>

<form ng-submit="handleRegBtnClick()" role="form" ng-init="registrationForm = {}">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email"
           name="email"
           id="email"
           ng-model="registrationForm.email"
           required="required"
           class="form-control">
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password"
           name="password"
           id="password"
           ng-model="registrationForm.password"
           required="required"
           class="form-control">
  </div>

  <div class="form-group">
    <label for="password_confirmation">Password confirmation</label>
    <input type="password"
           name="password_confirmation"
           id="password_confirmation"
           ng-model="registrationForm.password_confirmation"
           required="required"
           class="form-control">
  </div>

  <button type="submit" class="btn btn-primary btn-lg">Register</button>
</form>

---

一方面，你把分号放在了不该放的地方。你正在打破你的方法链

angular.module('my-app', ['ngRoute'])
   .controller('HomeCtrl', function($scope) {
      ...
    })
   .controller('UserRegistrationsController', ['$scope', function($scope) {
      ...
    }])
   .controller('UserSessionsController', ['$scope', function($scope) {
      ...
    }])
   .config(['$routeProvider', function($routeProvider) {
      ...
   }]);

---

我不知道这是您的全部问题，但请相应地更新代码，查看控制台并报告出现的错误。

问题与我的文件和资产有关。我安装了以下gem

gem "rails-assets-angular-ui-router"

我需要补充一点

gem "rails-assets-angular-route"

然后加上

#= require angular-route

---

到我的

application.js.coffee

文件

谢谢你的回答。我删除了控制器名称后的

）

，因此现在应该关闭大括号。顺便问一下，不需要的分号在哪里。我只把它们放在控制器和语句的末尾。控制器的末尾不应该有分号？正确-每个控制器关闭后都有分号。您试图将它们链接在一起，这是一种很好的设计模式，但却用分号打破了链接。把它想象成一个普通的JS模式，每个控制器都连接回angular.module（）。正如预期的那样，数据绑定仍然不起作用。我不知道如何调试angular，但我会试一试，然后再回复您我之所以问这个问题，是因为您的示例中没有包含angular，但您是否安装了ngRoute？请参阅规范：。当我运行包含ngRoute的代码时，我得到10，而不是{{5+5}}谢谢。我不知道

ngRoute

angular-ui-router

是不同的东西。这有帮助我可以用Chrome开发者工具来做吗？

angular.module('my-app', ['ngRoute'])
   .controller('HomeCtrl', function($scope) {
      ...
    })
   .controller('UserRegistrationsController', ['$scope', function($scope) {
      ...
    }])
   .controller('UserSessionsController', ['$scope', function($scope) {
      ...
    }])
   .config(['$routeProvider', function($routeProvider) {
      ...
   }]);

gem "rails-assets-angular-ui-router"

gem "rails-assets-angular-route"

#= require angular-route