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不显示产品，但产品确实显示了名称价格和描述元素

这是我的目录结构：当我在浏览器中使用php或者directy运行应用程序时（使用xamp）我得到以下内容：

这是我的输出

无论我使用Angular 1.4还是1.5

，我都会得到相同的结果

看来它没有看到app.js或angular.js（或者是否还有其他东西丢失了？）我试过以下开头的参考文献：

    / dist
    ./dist和
    〜/ 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;
});

你想要实例化宝石＆＃39;在将其分配到您的范围之前，或者更好，只需将其分配给$scope.products。

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

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

中还有一个类型

我不相信这整件事需要包含在一个匿名函数中。

编辑以Shitsu提到的方式包装实际上是一种好习惯。

Answer 2

正确加载角度，你是否在控制台中出现任何错误

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

看起来你有一个拼写错误，它应该是两种情况下的app

Answer 3

查看variable name中模块的app.js file。您放置了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

首先，语法错误：{j}文件中var ap应为var app。

此外，如果您不使用$scope，则必须使用＆＃34;控制器作为＆＃34;语法，即在你的html中，写：

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

如果角度模块中有错误，则无效。尝试修复它并检查控制台中的日志（在chrome或firefox中按F12），通常角度有点冗长。

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

角度表达式未被浏览器评估

4 个答案: