无法通过UI路由器和'控制器访问控制器属性作为'语法

时间:2016-06-14 09:09:14

标签: javascript angularjs

我正在使用ui-router进行路由,并且我将使用嵌套作用域,因此希望使用'控制器作为'句法。但是,我无法在我的视图中找到正确的语法/组合来访问控制器对象属性。

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>

最后, clients-index.html 部分

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

我也试过client in vm.clients,但没有用。

我的控制器是否存在语法问题?因为我在我的ui-router代码中使用控制器,但在创建我的控制器时却没有。如果我在控制器中再次使用控制器,则会出错(Argument ClientsController is not a)。

我应该指出,控制台日志记录vm.clients确实在控制台中提供了数据,我似乎无法在我的视图中访问它。

提前致谢。

1 个答案:

答案 0 :(得分:2)

修改您的ClientsController,如下所示

Private Sub btnSearch_Click(sender As Object, e As EventArgs) Handles btnSearch.Click

    'creating pgsql connection and query
    Dim myQuery As String
    Dim pgSqlConnection1 As PgSqlConnection = New PgSqlConnection()
    pgSqlConnection1.ConnectionString = "UserId=postgres;Password=***;Host=localhost;Database=postgres;Persist Security Info=True;Initial Schema=public"

    'searches according to selected column
    If ComboBox1.Text = "customer_name" Then
        myQuery = "SELECT customer_id, customer_name, balance FROM account_current WHERE customer_name LIKE '%" & TextBox1.Text & "%'"
        Search(myQuery, pgSqlConnection1)
    ElseIf ComboBox1.Text = "customer_id" Then
        myQuery = "SELECT customer_id, customer_name, balance FROM account_current WHERE customer_id LIKE '%" & CType(TextBox1.Text, Integer) & "%'"
        Search(myQuery, pgSqlConnection1)
    ElseIf ComboBox1.Text = "balance" Then
        myQuery = "SELECT customer_id, customer_name, balance FROM account_current WHERE balance LIKE '%" & CType(TextBox1.Text, Double) & "%'"
        Search(myQuery, pgSqlConnection1)
    End If

End Sub

Public Sub Search(myQuery As String, pgSqlConnection1 As PgSqlConnection)

    'Try statement to show error instead of crashing
    Try

        pgSqlConnection1.Open()
        Dim dt As New DataTable
        Dim MyCommand As New PgSqlCommand(myQuery, pgSqlConnection1)
        Dim myDataAdapter As New PgSqlDataAdapter(myQuery, pgSqlConnection1)
        myDataAdapter.Fill(dt)
        DataGridView1.DataSource = dt
        pgSqlConnection1.Close()

    Catch ex As Exception
        MessageBox.Show(ex.Message)
    End Try

End Sub

修改client-index.html,如下所示

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

下面的链接将帮助您更深入地理解控制器的语法

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