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

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

查看

<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 中的内容

Displaying content in Angular without $scope

javascript

angularjs

angularjs-routing

angular-ui-router

mean-stack