在没有 $scope 的情况下在 Angular 中显示内容

Question

我正在尝试使用 Angular、角度 UI-Router 和 不依赖 $scope 来显示内容。

在我的mainController 中，使用ng-repeat 之类的指令没有任何问题。但我不知道如何从我的postsController 获取信息。

我知道我在控制器中提取了正确的数据，因为 console.log 显示了正确的帖子对象。现在我只需要知道如何访问它。

index.html

<script type="text/ng-template" id="/posts.html" >

    {{ }} // What do I put here?

</script>

app.js

app.config([
  '$stateProvider',
  '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {
      ...
      .state('posts', {
        url: '/posts/{id}',
        templateUrl: '/posts.html',
        controller: 'postsController'
      });
      $urlRouterProvider.otherwise('home');
  }
]);

app.js

app.controller('postsController', [
  '$stateParams',
  'posts',
  function($stateParams, posts) {
    var vm = this;
    vm.post = posts.posts[$stateParams.id];
    console.log(vm.post);
  }

]);

Answer 1

您声明将使用controllerAs，因此您需要如下定义控制器。通过使用控制器的别名，您可以在视图中显示数据。

.state('posts', {
    url: '/posts/{id}',
    templateUrl: '/posts.html',
    controller: 'postsController as postCtrl'
});

查看

<script type="text/ng-template" id="/posts.html" >
    <ul>
      <li ng-repeat="p in postCtrl.post">{{p}}</li>
    </ul>
</script>

您应该拥有最新版本，例如0.2.0+ 版本的ui-router 来声明controllerAs，就像我建议的那样，对于旧版本，您可以使用@RadimKöhler 建议。

Answer 2

你应该使用声明controllerAs：

.state('posts', {
    url: '/posts/{id}',
    templateUrl: '/posts.html',
    controller: 'postsController',
    controllerAs: 'vm' // this will be injected into $scope
  });

视图会像这样使用它：

{{vm.data | json }}