无法使用UI路由器和“ controller as”语法访问视图中的控制器属性

Question

I am using ui-router for my routing, and am going to be using nested scopes and therefore want to be using the 'controller as' syntax. 我正在使用ui-router进行路由，并且将使用嵌套作用域，因此希望使用“ controller as”语法。 However, I can't work out the correct syntax / combinations to access the controller object properties in my view. 但是，我无法计算出正确的语法/组合来访问视图中的控制器对象属性。

app.js (sets up routing)

(function() {

    angular

    .module('ICP_App', ['ui.router', 'satellizer', 'ngMaterial', 'ngMessages', 'xeditable'])

        .config(function($stateProvider, $urlRouterProvider, $authProvider) {

            $urlRouterProvider.otherwise('dashboard');

            $stateProvider
                .state('clients', {
                    url: '/clients',
                    templateUrl: '../partials/clients-index.html',
                    controller: 'ClientsController as ClientsCtrl'
            })
            // more routes here...

})();

ClientsController.js

(function() {

    angular.module('ICP_App')
        .controller('ClientsController', function($http) {
            $http.get('http://api.icp.sic.com/clients')
                .success(function(clients) {
                    var vm = this;
                    vm.clients = clients.data;
                    console.log(vm.clients);
                })
                .error(function(error) {
                    // handle here
                })
        });

})();

index.html

<body ng-app="ICP_App" ng-cloak>

<!-- sidebar, header etc -->

    <div ui-view></div> <!-- pull in view -->

</body>

Finally, clients-index.html partial 最后， clients-index.html部分

<div class="content">
    <div class="pane" ng-repeat="client in clients">
        {{ client.name }}
    </div>
</div>

I have also tried client in vm.clients , to no avail. 我也尝试client in vm.clients ，但是没有用。

Is there a problem with my controller as syntax? 我的控制器语法是否有问题？ As I am using controller as in my ui-router code, yet not again when creating my controller. 正如我在ui路由器代码中一样使用控制器，但是在创建控制器时不再使用。 If I use controller as again in my controller, it errors ( Argument ClientsController is not a ). 如果我在控制器中再次使用controller，则会出错（ Argument ClientsController is not a ）。

I should point out that console logging vm.clients does give me the data in the console, I just can't seem to access it in my view. 我应该指出，控制台日志vm.clients确实为我提供了控制台中的数据，但在我看来似乎无法访问它。

Thanks in advance. 提前致谢。

Answer 1

Modify your ClientsController as follow 如下修改您的ClientsController

(function() {

angular.module('ICP_App')
    .controller('ClientsController', function($http) {
        var vm=this;
        $http.get('http://api.icp.sic.com/clients')
            .success(function(clients) {                   
                vm.clients = clients.data;
                console.log(vm.clients);
            })
            .error(function(error) {
                // handle here
            })
    }); })();

Modify client-index.html as following 如下修改client-index.html

<div class="content">
<div class="pane" ng-repeat="client in ClientsCtrl.clients">
    {{ client.name }}
</div>

Below link will help you to understand controller as syntax more deeply 下面的链接将帮助您更深入地了解控制器的语法

https://toddmotto.com/digging-into-angulars-controller-as-syntax/ https://toddmotto.com/digging-into-angulars-controller-as-syntax/

无法使用UI路由器和“ controller as”语法访问视图中的控制器属性

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-06-14 09:15:29

无法使用UI路由器和“ controller as”语法访问视图中的控制器属性

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-06-14 09:15:29

解决方案1
2 已采纳 2016-06-14 09:15:29