Отображение содержимого в Angular without $ scope

Question

Я пытаюсь отображать контент с использованием углового, углового 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 }}