【发布时间】：2017-03-30 18:28:58
【问题描述】：
这是我的 HTML 代码。我只是为部分代码创建了一个控制器。
<div class="mdl-grid" ng-controller="ValueController">
<div class="mdl-card mdl-shadow--4dp mdl-cell--12-col">
<div class="mdl-card__title">
<h3 class="mdl-card__title-text">Modifier seuils sur la carte</h3>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-grid">
<div class="mdl-cell--12-col mdl-grid">
<div class="mdl-cell--3-col mdl-grid">
<label class="mdl-cell--6-col">Plateforme</label>
<select class="mdl-cell--6-col" ng-model="platformselect" ng-change="obtainDatas()">
<option value="adsl">ADSL</option>
<option value="cable">Cable</option>
<option value="fibre">Fibre</option>
<option value="ott">OTT</option>
<option value="others">Others</option>
<option value="satellite">Satellite</option>
<option value="tnt">Tnt</option>
</select>
</div>
<div class="mdl-cell--3-col mdl-grid">
<label class="mdl-cell--6-col">Jour de la semaine</label>
<select class="mdl-cell--6-col" ng-model="dayselect" ng-change="obtainDatas()">
<option value="1">Lundi</option>
<option value="2">Mardi</option>
<option value="3">Mercredi</option>
<option value="4">Jeudi</option>
<option value="5">Vendredi</option>
<option value="6">Samedi</option>
<option value="0">Dimanche</option>
</select>
</div>
<div class="mdl-cell--3-col mdl-grid">
<label class="mdl-cell--6-col">Tranche horaire</label>
<select class="mdl-cell--6-col" ng-model="hourselect" ng-change="obtainDatas()">
<option value="0">0h-1h</option>
<option value="1">1h-2h</option>
<option value="2">2h-3h</option>
<option value="3">3h-4h</option>
<option value="4">4h-5h</option>
<option value="5">5h-6h</option>
<option value="6">6h-7h</option>
<option value="7">7h-8h</option>
<option value="8">8h-9h</option>
<option value="9">9h-10h</option>
<option value="10">10h-11h</option>
<option value="11">11h-12h</option>
<option value="12">12h-13h</option>
<option value="13">13h-14h</option>
<option value="14">14h-15h</option>
<option value="15">15h-16h</option>
<option value="16">16h-17h</option>
<option value="17">17h-18h</option>
<option value="18">18h-19h</option>
<option value="19">19h-20h</option>
<option value="20">20h-21h</option>
<option value="21">21h-22h</option>
<option value="22">22h-23h</option>
<option value="23">23h-0h</option>
</select>
</div>
<div class="mdl-cell--3-col mdl-grid">
<label class="mdl-cell--6-col">Départements</label>
<select class="mdl-cell--6-col" ng-model='deptselect' ng-change="obtainDatas()">
<option value="0">01</option>
<option value="1">02</option>
<option value="2">03</option>
<option value="3">04</option>
<option value="4">05</option>
<option value="5">06</option>
<option value="6">07</option>
<option value="7">08</option>
<option value="8">09</option>
<option value="9">10</option>
<option value="10">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">2A</option>
<option value="20">2B</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
</select>
</div>
</div>
</div>
<div class="mdl-card__actions mdl-card--border mdl-grid">
<div class="mdl-cell--4-col mdl-grid">
<label class="mdl-cell--5-col">Valeur attendue</label>
<input class="mdl-cell--7-col" type="text" style="background-color: #66BB6A" ng-model="normalvalue"></input>
</div>
<div class="mdl-cell--4-col mdl-grid">
<label class="mdl-cell--5-col">Haute valeur</label>
<input class="mdl-cell--7-col" type="text" style="background-color: #FFA726" ng-model="highvalue"></input>
</div>
<div class="mdl-cell--4-col mdl-grid">
<label class="mdl-cell--5-col">Très haute valeur</label>
<input class="mdl-cell--7-col" type="text" style="background-color: #EF5350" ng-model="veryhighvalue"></input>
</div>
</div>
<div class="mdl-card__actions mdl-card--border mdl-grid">
<div class='mdl-cell--12-col'>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" style="float: right" layout-align="end center">Valider</button>
</div>
</div>
</div>
</div>
我创建的控制器：
(function() {
angular.module('app').controller('ValueController', '$scope', ['forecastValue', function(forecastValue){
$scope.obtainDatas = function() {
forecastValue.getResults($scope.hourselect, $scope.dayselect, $scope.deptselect, $scope.platformselect)
.then(function(report) {
$scope.normalvalue = report.expected, $scope.highvalue = report.higherExpected, $scope.veryhighvalue = report.muchHigherExpected;
}).catch(function(err) {
$scope.result = '';
console.error('Unable to fetch forecast report: ' + err);
});
};
}]);
})();
获取数据的预测函数：
(function(){
angular.module('app')
.factory('forecastValue', ['$http', '$q', function($http, $q){
var apiAddr="https://something.com/app/getForecastDept";
var forecast ={};
forecastValue.getResults = function(hr, dy, dt, plm)
{
var httpParams = {
hour: hr,
day: dy,
dept : dt,
platform: plm
};
return $http.get(apiAddr, {
params: httpParams,
cache: true
}).then(function(result) {
return result.data;
});
};
return forecast;
}]);
})();
我的节点 js 代码中有关于这个功能的部分：
app.get('/app/getForecastDept', function(req, res) {
logger.info("GET /app/getForecastDept");
if (req.query.hour && req.query.day && req.query.dept && req.query.platform){
getForecastDept(res, req.query);
} else {
badCall(res, "getForecastDept");
}
});
因此，当我启动 HTML 页面时，启动的控制器没有任何功能。就像我什么都没编码一样。
如何解释这种行为？
【问题讨论】：
-
请通过 fiddle 或 plunker 提供更多代码，因为您的代码看起来没问题。同时确保您已将
ng-app指令应用于父<html>标签并查看浏览器控制台是否有错误。 -
在控制台中，我有这个：errors.angularjs.org/1.5.2/ng/… 是的，我在父 html 元素中有一个 ng-app 指令，就在“doctype”后面。
-
您是否在脚本中包含了控制器和工厂文件。
-
是的，完成了。
标签： javascript html angularjs node.js