通过 mean.js 服务 Angular.js 1.3.4 时无法访问花括号内的变量或控制器

Question

当从 Mean.js 服务 Angular 1.3 时 angular 似乎评估简单的花括号表达式，但它们无法访问当前范围内的变量。例如，在下面的代码中，简单求和计算正确，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>

这导致：

Simple sum: 2+2=4

First name:

Last name: 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>

结果

First Name: David

Last Name: Silva

Full Name:

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

编辑

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

Answer 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>

通过 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

angularjs

meanjs