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

Question

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

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

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

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'
});

<<p> 视图/strong>

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