我正在尝试创建一个项目，我使用AngularJS作为我的前端和Rails后端。基本上我跟随https://www.youtube.com/watch?v=R96rw9vEtiQ。我已经设置了一个rails项目，并且还按照链接中的建议安装了相应的gem。 角度ng-model指令在我的项目中按预期运行，但是当我使用ng-controller指令并在.js.coffee文件（或.coffee文件）中指定控制器功能时，它不会以某种方式链接到我的erb模板。 / p>
这是我得到this is what i am getting的结果。预期结果请在4.56分钟观看视频
Index.html文件
function dynamic1(parent,child){
//You will have to adjust the parent arrays and the values assigned to them in order to insert the values of your choice
var parent_array = new Array();
parent_array[0] = ['Please select a location...'];
parent_array[1] = ['Please select a university ...' ,'Macquarie University','UNSW','AICE','Sydney University','Western Sydney University','UWS','Australian Catholic University','Other'];
parent_array[2] = ['Please select a university..','University of Newcastle','Australian Catholic University','Other'];
parent_array[3] = ['Please select a university ...','Central Coast TAFE','Language College','Other'];
parent_array[4] = ['Please select a university','ANU', 'University of Canberra','Australian Catholic University','Other'];
parent_array[5] = ['Please select a university ...','Melbourne University','Monash University','Deakin University','Victoria University','Swinburne University','RMIT','Australian Catholic University','Other'];
parent_array[6] = ['Please select a university ...','University of Queensland','QUT','Australian Catholic University','Other'];
parent_array[7] = ['Please select a university ...','Edith Cowan','Murdoch','University of WA','WAAPA', 'Other'];
parent_array[8] =['Please enter your city ...'];
var thechild = document.getElementById(child);
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for(var i=0;i<parent_array[parent_value].length;i++){
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];} }
/there is code above this that populates the dynamic <select> and has the css */
function handleCourseLocation(){
var e = document.getElementById('location');
var opt = e.options[e.selectedIndex];
var oln = document.getElementById('otherlocation');
var uni = document.getElementById('university');
var otuni = document.getElementById('otheruni');
if (opt.value == 0){
oln.style.display ="none";
uni.style.display ="none";
otuni.style.display ="none";
}
else if (opt.value==8){
oln.style.display ="";
uni.style.display ="none";
otuni.style.display ="";
}
else {
oln.style.display ="none";
uni.style.display ="";
otuni.style.display ="none";
}
}
/* this is the function that fails */
/*(function handleUni(){
var f=document.getElementById('university');
var optf = f.options[f.selectedIndex];
var otuni = document.getElementById('otheruni');
If (optf.text == "Other"){
otuni.style.display="";
}
else {
otuni.style.display="none";
}
} */
function dynamicCourse(parent, child){
dynamic1(parent, child);
handleCourseLocation();
}
</script>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 40px; /* 40 px to provide clearance at the bottom for a bottom fixed navbar*/
padding-left: 10%;
padding-right:10%
}
select:invalid {
color: gray;
}
option:first {
color: gray;
}
</style>
</head>
<body onload="handleCourseLocation();">
<form class="form-horizontal">
<fieldset>
<legend>Details about you</legend>
<div class="control-group">
<label class="control-label" for="input-label">first name </label>
<div class="controls">
<input type="text" id="firstname" placeholder="e.g. Wendy, Min etc" maxlength="60" size="60"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">family name </label>
<div class="controls"</div>
<input type="text" id="lastname" placeholder="e.g. Xu, Smith etc" maxlength="60" size="60"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for ="input-label">your email </label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="email@somewhere.com" size="80"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">your birthday </label>
<div class="controls">
<input type="date" id="birthdate"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">gender </label>
<div class="controls">
<select class="span1"id="gender"/>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">telephone </label>
<div class="controls controls-row">
<input class="span1" type="text" id="country" placeholder="61" maxlength="3"/>
<input class="span5" type="text" id="telnumber" placeholder="9999-9999" maxlength="10"/>
</div>
</div>
</fieldset>
<p> </p>
<fieldset>
<legend>Details about your course</legend>
<p>We strive to make your travel time from your homestay to your institution to be less than 45 minutes. To achieve this we need to know when you start your course and where you will be studying when you are here.</p>
<div class="control-group">
<label class="control-label" for="input-label">start date </label>
<div class="controls">
<input type="date" id="cseStart"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">location </label>
<div class="controls controls-row">
<select class="span2" id="location" required onchange="dynamicCourse(this,'university');"/>
<option value = 0>Please select city or town ...</option>
<option value = 1>Sydney</option>
<option value = 2>Newcastle</option>
<option value = 3>Gosford/Central Coast</option>
<option value = 4>Canberra</option>
<option value = 5>Melbourne</option>
<option value = 6>Brisbane</option>
<option value = 7>Perth</option>
<option value = 8>Other city</option>
</select>
<input type = "text" id="otherlocation" placeholder="please type the city or town your college is in" maxlength ="60" size = "42"/>
<select class="span3" id="university" name="university" />
</select>
<input type = "text" id="otheruni" placeholder="please type your university or college" maxlength ="60" size = "42" />
</div>
</fieldset>
<p> </p>
<fieldset>
<legend>Details about your homestay needs ...</legend>
<p>To help us find you a homestay family to meet your needs, we need to know a little more about what type of homestay you are looking for.</p>
</fieldset>
</form>
application.html.erb
<h1>Raffle#index</h1>
<div ng-controller="RaffleCtrl">
<form>
<input type="text" ng-model="newEntry.name"></input>
</form>
<ul>
<li ng-repeat="entry in entries">
{{entry.name}}
<li>
<ul>
</div>
raffle.js.coffee
<!DOCTYPE html>
<html ng-app>
<head>
<title>Raffler</title>
<%= stylesheet_link_tag 'application', media: 'all'%>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
的Gemfile
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
@RaffleCtrl = ($scope) ->
$scope.entries = [
{name: "Larry"}
{name: "Curly"}
{name: "Moe"}
]
端