angular 个表达式未被浏览器计算

Question

我在 PHP 中使用 Angular。我已将 angular.js 文件复制到项目中并引用它。下面是我的项目：（是的，它来自 CodeSchool 教程）。

Index.html (html5)

<!DOCTYPE html>
<html ng-app="store" >
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="dist/vendors/Twitter/css/bootstrap.min.css">
    <script type="text/javascript" src="dist/vendors/Angular/angular.js"></script>
    <title>Flatlanders Gems</title>
</head>
<body >

    <div ng-controller="storeController">
            <h1> {{storeController.product.name}} </h1>
            <h2> {{storeController.product.price}} </h2>
            <p> {{storeController.product.description}} </p>
    </div>

<script type="text/javascript" src="dist/js/app.js"></script>

</body>
</html>

和我的app.js

(function () {
    var ap = angular.module('store', []);
    app.controller('storeController', function () {
        this.product = gem;
    });
    var gem = {
        name:'Dodecahedron',
        price: 2.95,
        description: '...'
    }
})();

代码完成在 phpStorm 中有效。有趣的是storeController不显示product，但是product确实显示name price和description元素

这是我的目录结构：当我运行来自 php 或浏览器中的 directy（使用 xamp）的应用程序时，我得到以下信息：

这是我的输出

无论我使用 Angular 1.4 还是 1.5

我得到的结果都是一样的

它似乎没有看到 app.js 或 angular.js（或者是否还缺少其他内容？）我尝试使用以以下开头的参考文献：

/距离
./dist 和
~/距离
结果都一样。

Answer 1

我不明白为什么您将控制器命名为 storeController，然后用它作为绑定模型的前缀 product。您的模型对象是 product，它在您的 storeController 控制器中实例化。它应该是这样的：

<div ng-controller="storeController">
    <h1> {{product.name}} </h1>
    <h2> {{product.price}} </h2>
    <p>  {{product.description}} </p>
</div>

而在你的 javascript...

var app = angular.module('store', []);
app.controller('storeController', function () {

var gem = {
    name:'Dodecahedron',
    price: 2.95,
    description: '...'
}

this.product = gem;
});

您想在将 'gem' 分配给您的范围之前对其进行实例化，或者更好的是直接将其分配给 $scope.products。

$scope.product = {
    name:'Dodecahedron',
    price: 2.95,
    description: '...'
}

此外，您的 var app = angular...

中有一个类型

我不认为这整件事需要用匿名函数包装。

编辑像 Shitsu 提到的那样包装实际上是一个很好的做法。

Answer 2

angular 是否正确加载，您是否在控制台中遇到任何错误

var ap = angular.module('store', []); app.controller('storeController', function () {

看来你打错了，应该都是app

Answer 3

在 app.js file 中查看您的模块的 variable name。你放 ap 但是当使用 app 来创建你的控制器时。

var ap = angular.module('store', []);
app.controller('storeController', function () {
    this.product = gem;
});

而不是

var app = angular.module('store', []);
app.controller('storeController', function () {
    this.product = gem;
});

或

var ap = angular.module('store', []);
ap.controller('storeController', function () {
    this.product = gem;
});

所以更正您的 var 名称，它将起作用。

Answer 4

首先，语法错误：var ap在你的js文件中应该是var app。

此外，如果您不使用 $scope，则必须使用 "controller as" 语法，即在您的 html 中，写：

<div ng-controller="storeController as ctrl">
       <h1> {{ctrl.product.name}} </h1>
       <h2> {{ctrl.product.price}} </h2>
       <p> {{ctrl.product.description}} </p>
</div>

如果您的 angular 模块中有错误，将无法正常工作。尝试修复它并检查控制台中的日志（在 chrome 或 firefox 中按 F12），通常 angular 有点冗长。

@Tuesdave 提到的 gem 问题是一个很好的观点，但是你在匿名函数中的包装是一个很好的观点，所以保留它！

angular 个表达式未被浏览器计算

angular expressions not being evaluated by browser

javascript

phpstorm

angularjs