Question

我是angularjs的新手，我对data-binding和dependency-injection的工作方式感到非常困惑。

为了测试代码是否有效，我创建了一个测试表达式5+5。如果我不在模块中注入依赖项，它会起作用，但如果我注入一个依赖项则不行。

我正在使用Ruby on Rails。这是示例代码

Welcome.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}}进行测试，评估为10.但是，如果我向模块添加依赖注入

angular.module("my-app", ['ngRoute'])
   .controller("HomeCtrl", function($scope) {
      $scope.number = 1;
    });
   .controller("UserRegistrationsCtrl", ['$scope', function($scope) {
    });
   .controller("UserSessionsCtrl", ['$scope', function($scope) {
    });
   .config(['$routeProvider', function($routeProvider) {
     $routeProvider
       .when('/', {
         templateUrl: 'views/welcome/index.html.erb',
         controller: 'HomeCtrl'
       })
     .when('/sign_in', {
       templateUrl: 'views/user_sessions/new.html',
       controller: 'UserSessionsCtrl'
      })
     .when('/sign_up', {
       templateUrl: 'views/user_registrations/new.html',
       controller: 'UserRegistrationsCtrl'
      })
     .otherwise({
        redirectTo: '/'
     });
   }]);

数据绑定看起来好像坏了，列表项呈现为{{5+5}}。

user_sessions / 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>

user_registrations.html

<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>

不确定为什么数据绑定被破坏了。任何帮助将不胜感激。

更新

我在Chrome开发者工具中进入了控制台，并运行了几个命令

var listElement = document.querySelector('ul')
listElement
=><ul class="list-inline" ng-app="my-app" ng-controller="HomeCtrl">...
listElement.controller();
=>TypeError: undefined is not a function
listElement.injector();
=>TypeError: undefined is not a function

以下是我正在使用的脚本

    <script src="/assets/jquery-7f1a72dc175eaa60be2e692ab9e6c8ef.js?body=1"></script>
<script src="/assets/jquery_ujs-68ce8f5ee2895cae3d84a114fdb727e1.js?body=1"></script>
<script src="/assets/bootstrap-3dfec047bf3f975670c20b5e35a5f42e.js?body=1"></script>
<script src="/assets/angular/angular-8bf873ad356fbb7267e223d5cac348f5.js?body=1"></script>
<script src="/assets/angular-8bf873ad356fbb7267e223d5cac348f5.js?body=1"></script>
<script src="/assets/angular-cookie/angular-cookie-79e90f9112d0e1bf9aede30a4b7f5d36.js?body=1"></script>
<script src="/assets/angular-cookie-79e90f9112d0e1bf9aede30a4b7f5d36.js?body=1"></script>
<script src="/assets/angular-bootstrap/ui-bootstrap-tpls-2d5fe21018866bf67cca9784e2ae95a9.js?body=1"></script>
<script src="/assets/angular-bootstrap-2d5fe21018866bf67cca9784e2ae95a9.js?body=1"></script>
<script src="/assets/angular-messages/angular-messages-f8b337aaacde7f3ee4d9fd590f36749a.js?body=1"></script>
<script src="/assets/angular-messages-f8b337aaacde7f3ee4d9fd590f36749a.js?body=1"></script>
<script src="/assets/angular-resource/angular-resource-79e25fff913ab31c097086ac463d7d41.js?body=1"></script>
<script src="/assets/angular-resource-79e25fff913ab31c097086ac463d7d41.js?body=1"></script>
<script src="/assets/angular-ui-router/angular-ui-router-1c9044ef4d22b7d3b266e72a34c275ea.js?body=1"></script>
<script src="/assets/angular-ui-router-1c9044ef4d22b7d3b266e72a34c275ea.js?body=1"></script>
<script src="/assets/angular-ui-utils/ui-utils-895ce7dcab9d6b51db05d3816862b02c.js?body=1"></script>
<script src="/assets/angular-ui-utils-895ce7dcab9d6b51db05d3816862b02c.js?body=1"></script>
<script src="/assets/ng-token-auth/ng-token-auth-1e86f8812a656893f8b8ee6fe807290d.js?body=1"></script>
<script src="/assets/ng-token-auth-1e86f8812a656893f8b8ee6fe807290d.js?body=1"></script>
<script src="/assets/angular/app-b06dbf3801b44bee508a1fea1255119d.js?body=1"></script>
<script src="/assets/application-b2f074707bb9272eab9330966cfe5014.js?body=1"></script>

我的application.js.coffee

#= require jquery
#= require jquery_ujs
#= require bootstrap
#= require angular
#= require angular-cookie
#= require angular-bootstrap
#= require angular-messages
#= require angular-resource
#= require angular-ui-router
#= require angular-ui-utils
#= require ng-token-auth
#= require_tree

Answer 1

首先，你要把半冒号放在你不应该的地方。你正在破坏你的方法链。

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

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

Answer 2

问题与我的Gemfile和Assets有关。我安装了以下宝石

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

我需要添加

gem "rails-assets-angular-route"

然后添加

#= require angular-route

到我的application.js.coffee文件

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

2 个答案: