Question

试图弄清楚为什么这个基本设置不起作用。我之前已经让它运行了，但由于某种原因，当我打开页面时，{{expression}}被识别，但控制器内的值却没有。该页面只显示空白而不是说应该“测试”。

<!doctype html>
<html ng-app='bookerApp'>
<head>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<link rel='stylesheet' href='css/styles.css'>
<script src='js/angular.min.js'></script>
<script src='js/controllers/BookerController.js'></script>
</head>
<body ng-contoller='BookerController'>
{{test}}
<div class='booker-head'>

</div>

JS：

var app = angular.module('bookerApp', []);

app.controller('BookerController', ['$scope', function($scope){

    $scope.days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    $scope.test = "Testing";

}]);

帮助将不胜感激，谢谢。

Answer 1

请尝试以下代码。

(function() {
  'use strict';
  var app = angular.module('bookerApp', []);


  app.controller('BookerController', ['$scope',
    function($scope) {

      $scope.days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
      $scope.test = "Testing: its working";

    }
  ]);
})();

<html ng-app="bookerApp">

<head>
  <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="BookerController">
  <h1>Angular Setup</h1>
  <p>{{test}}</p>
</body>

</html>

Answer 2

(function(angular) {
'use strict';
var myApp = angular.module('bookerApp', []);

  myApp.controller('BookerController', ['$scope', function($scope) {
    $scope.days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    $scope.test = "Testing";

  }]);
})(window.angular);




<!doctype html>
<html lang="en" ng-app="bookerApp">
<head>
  <meta charset="UTF-8">
  <title>bookerApp</title>
  <link rel='stylesheet' href='css/bootstrap.min.css'>
  <link rel='stylesheet' href='css/styles.css'>

  <body ng-contoller='BookerController'>
    {{test}}
  </body>
  <script src='js/angular.min.js'></script>
  <script src='js/controllers/BookerController.js'></script>
</html>

Angular $ scope值无法识别

2 个答案: