AngularJS表达式不起作用
[英]AngularJS expressions not working
问题描述
I'm not able to display expression in AngularJS. 
我无法在AngularJS中显示表达式。 Below is my the HTML code. 下面是我的HTML代码。
<!DOCTYPE html>
<html data-ng-app="appname">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="javascript.js"></script>
</head>
<body>
<div data-ng-controller="appCtrl">
<p>{{appname.product.name}}</p>
</div>
</body>
</html>
This is javascript.js file: 这是javascript.js文件：
(function () {
var appname = angular.module('appname', []);
var gem = {
name: "Ring",
price: 2.9,
Description: "",
};
appname.controller('appCtrl', function () {
this.product = gem;
});
});
The webpage still displays: {{appname.product.name}} . 该网页仍会显示： {{appname.product.name}} 。
4 个解决方案
解决方案1
1 已采纳 2015-09-29 13:08:08
You need to include scope in the controller as well as in view 您需要在控制器和视图中包含范围
Change you code like this: 改变你的代码如下：
Controller: 控制器：
var appname = angular.module('appname', []);
appname.controller('appCtrl', function($scope)
{
$scope.gem = {
name:"Ring",
price:2.9,
Description:"",
};
});
HTML: HTML：
<html data-ng-app="appname">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="javascript.js"></script>
</head>
<body>
<div data-ng-controller="appCtrl">
<p>{{gem.name}}</p>
</div>
</body>
</html>
Here is the codepen link: http://codepen.io/anon/pen/epgmGd 这是codepen链接： http ：//codepen.io/anon/pen/epgmGd
解决方案2
1 2015-09-29 13:08:50
You are doing a number of things in a wrong way. 你正在以错误的方式做很多事情。
Use the 'as' syntax if you want to follow 'this' (as opposed to $scope) approach. 如果要遵循'this'（而不是$ scope）方法，请使用'as'语法。
In your markup: 在你的标记中：
<div data-ng-controller="appCtrl as app">
<p>{{app.product.name}}</p>
</div>
In your controller: 在你的控制器中：
this.product = {
name:"Ring",
price:2.9,
Description:"",
};
解决方案3
1 2015-09-29 13:09:02
There are two ways to fix this: 有两种方法可以解决这个问题：
First is to use the $scope way: 首先是使用$scope方式：
var appname = angular.module('appname', []);
appname.controller('appCtrl', function ($scope) {
$scope.gem = {
name: "Ring",
price: 2.9,
Description: "",
};
});
Now modify your view as: 现在将您的视图修改为：
<div data-ng-controller="appCtrl">
<p>{{product.name}}</p>
</div>
Another way which you are using is the this way: 它使用的是另一种方式是this的方式：
var appname = angular.module('appname', []);
appname.controller(function() {
this.gem = {
name: "Ring",
price: 2.9,
Description: "",
};
});
And modify your view as: 并将您的视图修改为：
<div data-ng-controller="appCtrl as main">
<p>{{main.product.name}}</p>
</div>
Also, like @ryanyuyu mentioned in the comment, you need to immediatly invoke your function: like so: 另外，就像评论中提到的@ryanyuyu一样，你需要立即调用你的函数：像这样：
(function () {
// Your code
})(); // Add () at last
解决方案4
0 2017-03-29 13:29:37
Probably undocumented case. 可能没有证件的案件。
In my case, I had got $window level variables of the same name that I was declaring on $scope level. 在我的情况下，我得到了与$scope级别声明的$scope name $window级变量。
After changing the name of the variable it worked. 更改其工作的变量名称后。
Strange, as it does recognize $scope level variable in js code but when it comes to putting the value in expressions it gets confused. 很奇怪，因为它确实在js代码中识别$scope level变量，但是当它将值放在表达式中时会让人感到困惑。
//Global JS variable
var currentLocationName = "Nice Location";
I was copying this global variable at $scope level. 我在$scope级别复制了这个全局变量。
$scope.currentLocationName = $window.currentLocationName;
And was having it in the expression in my HTML view. 并在我的HTML视图中的表达式中使用它。
<b>Your current location is {{ currentLocationName }}</b>
And this was not working. 这不起作用。 I changed the name at $scope level and it worked. 我在$scope级别更改了名称并且它有效。
My two cents! 我的两分钱！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.