Question

由于某些原因，当我使用ng-repeat时，$ scope变量不会将其数据绑定到视图。它让我疯了，因为我弄清楚我在这种情况下做错了什么。当我在console.log中使用$ scope变量时，它只会在我使用ng-repeat时拒绝绑定到视图。在这种情况下，单词＆＃34;电影＆＃34;在段落标记重复3次，但没有数据与它一起使用。以下是代码：

<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>

<body>
<div>Hello World!
    <div ng-repeat="movie in movies">
       <p>movie: {{movie.moviename}}</p>
    </div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">

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

function IndexCtrl($scope) {
    $scope.movies = [
      {'moviename':'ironman'},
      {'moviename':'antman'},
      {'moviename':'man'} 
    ];
    console.log($scope.movies);
};
</script>
</body>
</html>

Answer 1

经过漫长的不眠之夜，我找到了答案。显然问题是我的节点js express服务器使用胡子作为模板html的中间件。它也使用{{}}符号，因此角度永远不会解释发生了什么。所以我用$ interpolateProvider来改变角度符号，现在它工作得很漂亮。

var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});

对于使用node.js后端并且不使用jade作为模板语言的其他人，我希望这会有所帮助！

Answer 2

最好显式定义模块内的控制器：

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

myApp.controller('IndexCtrl', function($scope) {
    $scope.movies = [
      {'moviename':'ironman'},
      {'moviename':'antman'},
      {'moviename':'man'} 
    ];
    console.log($scope.movies);
});

但....我完全复制了代码，取代了角度资源路径。一切正常。

<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>

<body>
<div>Hello World!
    <div ng-repeat="movie in movies">
       <p>movie: {{movie.moviename}}</p>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">

var myApp = angular.module("myApp", []);

function IndexCtrl($scope) {
    $scope.movies = [
      {'moviename':'ironman'},
      {'moviename':'antman'},
      {'moviename':'man'} 
    ];
    console.log($scope.movies);
};
</script>
</body>
</html>

AngularJS：$ scope在使用ng-repeat时不绑定到视图

2 个答案: