当角色代码移动到模板文件时停止工作

Question

我是Angular的新手，所以文档有点像熊。当我创建以下代码并且它有效时，我认为我处在一个好地方。

<div ng-controller="postListController">
    {{someDataStuff}} <!-- this always works -->
    <div ng-repeat="post in data">
            <b>{{post.title}}</b> <!-- This sometimes works -->
    </div>
</div>

...和Angular中的这个Javascript（实际上是一个片段）

var listController = app.controller('postListController', function postListController($scope) {
    $scope.someDataStuff = 'hey there.';
    $scope.data = new Object(null);
    $.get('get.php',function(data) {
        $scope.data = JSON.parse(data);
        console.log($scope.data);
    });
});

someDataStuff打印出来，Angular愉快地环绕post.titles。然后我尝试将这些内容逐字移动到模板文件并正确加载...

app.directive('ngPostList', function() {
    return{
        restrict: 'E',
        templateUrl: 'postlist.html'
    }
});

这部分......只是有点工作。虽然我仍然在获取数据（在console.log中返回），但我仍然需要someDataStuff回来，它实际上并没有循环数据。

app.directive中有什么东西让我把数据传递给我现在使用的模板吗？

Answer 1

您的模板也应该使用控制器，否则它超出了范围，您进一步向下一级，您必须调用$ parent.post.title等...以使用数据到达正确的父范围。

尝试：

app.directive（＆＃39; ngPostList＆＃39;，function（）{     返回{         限制：＆＃39; E＆＃39;，         控制器：＆＃39; postListController＆＃39;，         templateUrl：＆＃39; postlist.html＆＃39;     } }）;

总的来说，选择一个Chrome扩展程序来调试Angular，比如ng-inspector，这样你就可以看到哪些范围包含哪些数据，这让你的生活更容易调试这类事情。 角度问题是95％的时间问题，范围不是您的想法。