Javascript 向轨道中注入角度_Javascript_Ruby On Rails_Ruby_Angularjs_Coffeescript

Javascript 向轨道中注入角度

javascript ruby-on-rails ruby angularjs coffeescript

Javascript 向轨道中注入角度,javascript,ruby-on-rails,ruby,angularjs,coffeescript,Javascript,Ruby On Rails,Ruby,Angularjs,Coffeescript,有很多关于这个话题的文章，但在我看来，最简单的开始方式是railscast angular和这个。每一篇文章（视频）共享几乎相同的代码。我尝试了两种方法，但两种方法都不起作用。这是我的方式： application.js user.js.coffee assets/javascript/controllers/mainIndexCtrl.js.coffee application.html.erb show.html.erb 你好这是你的相册 {{title}} 我添加到vendor/

有很多关于这个话题的文章，但在我看来，最简单的开始方式是railscast angular和这个。每一篇文章（视频）共享几乎相同的代码。我尝试了两种方法，但两种方法都不起作用。这是我的方式：

application.js

user.js.coffee

assets/javascript/controllers/mainIndexCtrl.js.coffee

application.html.erb

show.html.erb


你好
这是你的相册
{{title}}

我添加到vendor/assets/javascript和gemfile中的库是2变量。结果中“title”的显示方式不正确，而是显示{{title}。谢谢您的回答。

我想这行有一个错误（额外的点）：

$.scope.title=“wwaaaaaaaaa”

应该是：

$scope.title=“wwaaaaaaaa”

另一件事是，您正在做一些奇怪的混合“经典”RoR应用程序和AngularJS应用程序

在“经典”RoR应用程序中，您使用erb或其他模板引擎生成动态html内容

使用AngularJS，您可以提供静态html页面，“动态化”发生在客户端（在客户端浏览器中）

我建议将您的应用程序分为两部分，一部分是基于Ruby on Rails的后端，它充当API；另一部分是前端，它是基于AngularJS的单页应用程序，使用前端应用程序的典型工具，如Yeoman（）

检查html是否需要

application.js

Angularjs文件必须存在，您可以在

application.js

查看类似浏览器的Chrome并打开控制台，查看是否存在

javascript

错误

通常，当您正确地需要angularjs并在html中嵌入

ng app

和

ng controller

时，设置

{{{1+1}}

，然后您将在该页面中看到

。仍然显示

{}

意味着angularjs不需要成功或angularjs范围错误

浏览器中firebug控制台中的任何错误？好吧，这并没有解决问题（这是一个“坏”的地雷错误），但是关于拆分是一个好主意。1）

，是的，它包括在内。2）是的，它在app.js中定义，lib在vendor中。3）我用firebug调试了我的页面，出现了这种错误。

[ng:areq]参数'IndexCtrl'不是函数，未定义。

。我想这是意料之中的，因为我的应用程序无法识别角度。看起来你的咖啡代码有问题，但我不使用咖啡。在js中，我经常定义一个类似Ctrl的

var IndexCtrl=['$scope'，function（$scope）{$scope.title='wwaaaaaaaa'}]

，这很有效。什么，错了吗？我不明白。关于js，我试过你的方法，但仍然没有正确的方法<代码>var IndexCtrl=['$scope'，function（$scope）{$scope.title=“wwaaaaaaaa”；$scope.Data={}；$scope.Data.doClick=function（）{responsePromise=$http.get（'/user/photos_show'）；responsePromise.success=function（Data）{$.scope.Data.Response=Data；}；}

//= require angular
//= require_tree .
//= require underscore

#= require_self
#= require_tree ./controllers

@IndexCtrl = ($scope) ->
    $.scope.title = "WWAAAAAAA"

    $scope.Data = {}
    $scope.Data.doClick = ->
        responsePromise = $http.get('/user/photos_show')
        responsePromise.success (data) ->
            $.scope.Data.Response = data

<html ng-app>

<%= notice %>
<h3>Hello there <%= @user.name %></h3>
<div ng-controller="IndexCtrl">
    <p> Here are your albums </p>
    {{title}}
    <% @albums.each do |album|  %>
        <div>
            <%= link_to album.last, album_photos_path( album_id: album.first, album_name: album.last ) %>
        </div>
    <% end %>
</div>