首頁(yè) 猿問(wèn) 簡(jiǎn)單問(wèn)題：為什么angular...

簡(jiǎn)單問(wèn)題：為什么angular js無(wú)法正常工作？

JavaScript

蝴蝶不菲 2018-10-16 13:31:23

我寫(xiě)了一段簡(jiǎn)單代碼，使用了angular js，可是不知道為什么，程序并沒(méi)有響應(yīng)我的代碼，代碼如下：<!DOCTYPE html><html ng-app> <head> <title>js </title> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <table ng-controller="BasketCtrl"> <tr><td>Item:</td><td>{{description}}</td></tr> <tr><td>cost:</td><td>{{cost}}</td></tr> <tr><td>qty:</td><td><input type="number" ng-model="qty"></td></tr> <tr><td>subtotal:</td><td>{{qty * cost|currency}}</td></tr> </table> <script src="./js/test1.js"></script> </body></html>test1.js是我自己定義的一小段js：function BasketCtrl($scope) { $scope.description='Singe ticket'; $scope.cost=8; $scope.qty=1; }然而，似乎并不能正確運(yùn)行：那個(gè)cdn是用的網(wǎng)上一個(gè)叫“菜鳥(niǎo)教程”所提供的，沒(méi)有問(wèn)題。作為新手實(shí)在是不明白自己這段代碼的問(wèn)題所在，希望有朋友和大神可以指出，謝謝~

查看完整描述

1 回答

炎炎設(shè)計(jì)

TA貢獻(xiàn)1808條經(jīng)驗(yàn) 獲得超4個(gè)贊

你使用的Angular版本是1.4.6，而在Angular1.3.0及其后版本中，不允許直接在根節(jié)點(diǎn)上(rootScope)上掛載控制器，而你寫(xiě)的代碼中是直接注冊(cè)了控制器，所以控制臺(tái)必定會(huì)報(bào)錯(cuò)。
解決方法是創(chuàng)建模塊，即在HTML中設(shè)置ng-app="basket"
在JS中：

var app = angular.module('basket');                        
// 創(chuàng)建的模塊名，在ng-app中使用此名稱app.controller('BasketCtrl', function BasketCtrl($scope) { // 在模塊上注冊(cè)控制器
    $scope.description='Singe ticket';
    $scope.cost=8;
    $scope.qty=1;
})

反對(duì) 回復(fù) 2018-11-01