Question

由于某种原因，我的大括号正在打印其中的内容（在index.html文件上），而不重定向到控制器文件中的$ scope。

好吧，所以我试图使用AngularJs和PHP作为学校项目的一部分来编写一个测验页面。现在，我正在尝试让我的一个控制器工作。（我目前正在关注在线教程）。

(function(){

    angular
      .module("LaBoa")
      .controller("listCtrl", [ListController]);

     function ListController($scope){
      // List Controller Logic

        $scope.dummyData = "hello world";
    }

  })();

这就是在index.html页面上写的

<body>
  <div class="container">
    <div class="page-header">
      <h1>La Boa- Quiz</h1>
      <h3>
        Weekly quiz! 
        <strong>La Boa- Quiz</strong>
      </h3>
    </div>
    <div ng-controller="listCtrl"></div>
        {{dummyData}}

    </div>

下面是我的整个index.html文件

<!DOCTYPE html>
<html lang="en" ng-app="LaBoa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Turtle Facts and Quiz</title>
  <!-- Bootstrap css and my own css -->
  <link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"

integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="page-header">
      <h1>La Boa- Quiz</h1>
      <h3>
        Weekly quiz! 
        <strong>La Boa- Quiz</strong>
      </h3>
    </div>
    <div ng-controller="listCtrl">
          {{dummyData}}
      </div>
    </div>

  </div>

  <!-- third party js -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
    crossorigin="anonymous"></script>

  <!-- Our application scripts -->
  <script scr="js/app.js"></script>
  <script scr="js/controllers/list.js"></script>

    </body>
    </html>

当我在实时服务器上运行它时，它仅显示“ {{dummyData}}”。我想说“你好，世界”。

Answer 1

首先，在html文件底部加载脚本（在scr上更改src时，在字符串中会出现一些错误）。其次，您没有将$scope传递给控制器。你去...

html文件

<!DOCTYPE html>
<html lang="en" ng-app="LaBoa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Turtle Facts and Quiz</title>
  <!-- Bootstrap css and my own css -->
  <link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"

integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="page-header">
      <h1>La Boa- Quiz</h1>
      <h3>
        Weekly quiz! 
        <strong>La Boa- Quiz</strong>
      </h3>
    </div>
    <div ng-controller="listCtrl">
          {{dummyData}}
      </div>
    </div>

  </div>

  <!-- third party js -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
    crossorigin="anonymous"></script>

  <!-- Our application scripts -->
  <script src="js/app.js"></script>
  <script src="js/controllers/list.js"></script>

    </body>
    </html>

js脚本

(function(){

    angular
      .module("LaBoa",[])
      .controller("listCtrl", ['$scope', ListController]);

     function ListController($scope){
      // List Controller Logic

        $scope.dummyData = "hello world";
    }

  })();

Answer 2

请检查下面的助听器，这可能对您有帮助。

(function(){


    var myApp = angular.module('LaBoa',[]);

myApp.controller('listCtrl', ['$scope', function($scope) {
  $scope.dummyData = "hello world";
}]);

  })();

https://plnkr.co/edit/aU3KgU9ktFmPi4PPG1Te?p=preview

为何AngularJ无法将我的{{}}识别为表达式？

2 个答案: