Question

我正在尝试使用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'
});

查看

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

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

2 个答案: