angularjs - 添加依赖关系中断数据绑定

我是angularjs的新手，对于data-binding和dependency-injection如何工作，我感到非常困惑。angularjs - 添加依赖关系中断数据绑定

为了测试代码是否有效，我创建了一个测试表达式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>

我的应用程序的脚本.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

来源

2015-03-02 Darkmouse

我能做到这一点与Chrome开发人员工具？ – Darkmouse 2015-03-02 17:16:48

首先，你正在放置不应该是的分号。你打破了你的方法链。

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

我不知道，这将是您的整个问题，但相应地更新你的代码，看看你的控制台和报告错误出来那里。

来源

2015-03-02 16:40:38 getglad

感谢您的回答。我在控制器名称后删除了'''，所以现在应该关闭大括号。顺便说一下，不需要的分号在哪里。我只把它们放在控制器和报表的末尾。控制器的末尾不应该有分号？ – Darkmouse 2015-03-02 16:47:20

正确 - 每个控制器关闭后你都有分号。你试图将它们链接在一起，这是一个很好的设计模式，但是用分号打破了链条。把它想象成一个普通的JS模式，每个控制器连接到你的angular.module（）。 – getglad 2015-03-02 17:02:02

正如所料，数据绑定仍然不起作用。不知道如何调试角度，但我会给它一个镜头，并得到回复 – Darkmouse 2015-03-02 17:16:09

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

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

我需要添加

gem "rails-assets-angular-route"

再加入

#= require angular-route

我application.js.coffee文件

来源

2015-03-02 19:21:48 Darkmouse

angularjs - 添加依赖关系中断数据绑定

回答

相关问题