通过 mean.js 提供 Angular.js 1.3.4 时，无法访问大括号内的变量或控制器答案

【问题标题】：When serving Angular.js 1.3.4 through mean.js cannot access variables or controllers within curly braces通过 mean.js 提供 Angular.js 1.3.4 时，无法访问大括号内的变量或控制器
【发布时间】：2015-02-21 10:20:46
【问题描述】：

当从 Mean.js 提供 Angular 1.3 时，angular 似乎评估简单的大括号表达式，但它们无法访问当前范围内的变量。例如，在下面的代码中，简单的 sum 计算正确，ng-bind 计算正确，但尝试访问变量的花括号表达式没有

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>

<body ng-app ng-init="firstName = 'John'; lastName = 'Doe';">
  <strong>Simple sum:</strong> 2+2={{2+2}}<br />
  <strong>First name:</strong> {{firstName}}<br />
  <strong>Last name:</strong> <span ng-bind="lastName"></span>
</body>

</html>

这会导致：

简单和：2+2=4

名字：

姓氏：Doe

即 {{2+2}} 已评估但 {{firstName}} 未评估

同样，虽然我可以在指令中访问控制器，但我似乎无法从大括号表达式中访问控制器。即

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body>

  <div ng-app="myApp" ng-controller="personController">

    First Name:
    <input type="text" ng-model="firstName"><br>
    Last Name:
    <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName +" "+ lastName}}
    

  </div>
</body>
<script type="text/javascript">

  var app = angular.module("myApp",[]);

  app.controller('personController', function($scope,$http){
   $scope.firstName = "David";
   $scope.lastName = "Silva";
 })
</script>

</html>

结果

名字：大卫

姓：席尔瓦

全名：

即{{firstName +" "+ lastName}} 不会被评估，即使在同一范围内绑定到正确的变量

编辑

使用 jsfiddle 无法复制此问题，并且与服务器（Mean.js）有关。我通过 playframework 提供完全相同的 html 页面和 JS 文件来确认这一点，没有任何问题。所以现在的问题是“mean.js 在做什么以上述方式破坏角度”

【问题讨论】：

创建一个 plunker 或小提琴我没有发现你的代码有什么问题。
似乎在 plunker plnkr.co/edit/6XpoUegBfydM3HaCqoys?p=preview 中工作，通过 MEAN.js 提供服务，因此可能与缩小器或其他东西有关。
那么，您自己的程序中的控制台是否有任何错误？
控制台没有错误
所以你的代码的其他地方一定有问题

标签： angularjs meanjs

【解决方案1】：

我使用相同版本的 angular 复制了您的代码，但无法重现您遇到的问题。

var app = angular.module("myApp",[]);

  app.controller('personController', function($scope, $http){
   $scope.firstName = "David";
   $scope.lastName = "Silva";
 })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="personController">

    First Name:
    <input type="text" ng-model="firstName"><br>
    Last Name:
    <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName +" "+ lastName}}


</div>

附带说明，不直接相关，您应该迁移到 controllerAs 语法。这将帮助您在表达式和绑定中始终拥有 object.property。这将允许 JavaScript 引用按预期工作，这可能会导致与您报告的问题类似的问题。

您的示例将如下所示：

angular.module("myApp", [])
    .controller('PersonController', PersonController);

PersonController.$inject = ['$http'];
function PersonController($http) {
   this.firstName = "David";
   this.lastName = "Silva";
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="PersonController as vm">

    First Name:
    <input type="text" ng-model="vm.firstName"><br>
    Last Name:
    <input type="text" ng-model="vm.lastName"><br>
    <br>
    Full Name: {{vm.firstName +" "+ vm.lastName}}


</div>

【讨论】：