初学者 Angular JS 应用程序,插值不起作用

Posted

技术标签:

【中文标题】初学者 Angular JS 应用程序,插值不起作用【英文标题】:Beginner Angular JS app, interpolation not working 【发布时间】:2016-11-17 10:38:38 【问题描述】:

我刚开始使用 Angular JS(版本 1),但无法正确运行插值。我已经用已解决的版本检查了它,对我来说看起来不错。我什至在控制器中放置了一个 console.log 并且它不打印任何东西。请帮忙。

index.html

<!doctype html>
<html lang="en" np-app="LunchCheck">
  <head>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
    <title>Lunch Checker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <style>
      .message  font-size: 1.3em; font-weight: bold; 
    </style>
  </head>
  <body>
      <div class="container" ng-controller="LunchCheckController">
       <h1>Lunch Checker</h1>
       <div class="form-group">
           <input id="lunch-menu" type="text"
           placeholder="list comma separated dishes you usually have for lunch"
           class="form-control" ng-model="food">
           Content is: food
       </div>
     </div>
  </body>
</html>

app.js

(function()
  'use strict';

  angular.module('LunchCheck', [])

  .controller('LunchCheckController', LunchCheckController);

  LunchCheckController.$inject = ['$scope'];

  function LunchCheckController($scope)
    console.log("In controller");
    $scope.food = 'Enter something';
  

)();

【问题讨论】:

你写的是 np-app="LunchCheck" 而不是 ng-app 【参考方案1】:

用 ng-app 替换 np-app 就可以了

【讨论】:

【参考方案2】:

你写的是 np-app 而不是 ng-app

&lt;html lang="en" np-app="LunchCheck"&gt;

【讨论】:

以上是关于初学者 Angular JS 应用程序,插值不起作用的主要内容,如果未能解决你的问题,请参考以下文章

2017年前端开发Angular.JS从入门到上手企业开发视频

使用 Angular.js 和 Node.js 构建实时应用程序的更好方法是啥?

带角度插值的内联 CSS

使用dwr后,javaweb设置的session超时失效,web.xml和tomcat设置都不起作

Js文件在Angular项目中导入时不起作用

我如何在 cdk-overlay-pane 旁边为 Angular 7 中的材质菜单应用自定义类