用角度绑定数据。 （调用方法进入视图）

I want to bind some data with angular, I made an example and it works but I'm having problems to integrate my stuff into another app.

我想用angular绑定一些数据，我做了一个例子，但它有效，但我有问题将我的东西集成到另一个应用程序中。

This is the controller of that app

这是该应用程序的控制器

angular.module('app', ['dcafe.navigation','ui.bootstrap'])

.controller('HeadlineReportController', function($scope, $http, $interpolate, $filter, datafactory, d3Factory, $timeout){

    //code

    $scope.SendData = function(){

        $http.post('http://localhost:8080/xxx/xxx/', data, config)

        .success(function (data, status, headers, config) {
            $scope.PostDataResponse = data;
            console.log("Success");
            console.log("Status code: " + status);

        })
        .error(function (data, status, header, config) {
            //$scope.ResponseDetails = "Data: " + data +
                console.log("Error");
                console.log("Status: " + status);
                console.log("Headers: " + header);
        });

    };
    $scope.SendData();

    //MORE CODE

});

I was working with the SendData() function that was inside a controller, in my view I used ng-controller and then the ng-repeat, but things are different in the second app.

我正在使用控制器内部的SendData（）函数，在我看来我使用ng-controller然后使用ng-repeat，但第二个应用程序中的情况有所不同。

They call the controller at the begining of the view like this:

他们在视图的开头调用控制器，如下所示：

<span ng-controller="HeadlineReportController as vm">

so I tried to do the ng-repeat like in my workig app, like this:

所以我试着在我的workig应用程序中进行ng-repeat，如下所示：

<tr ng-repeat="data in PostDataResponse.result"> </tr>

But as you can see in the controller above the $scope.SendData = function() {}

但是你可以在控制器上面看到$ scope.SendData = function（）{}

is part of the HeadlineReportController so in this case I dont know how to do my ng-repeat, I was thinking in something like this:

是HeadlineReportController的一部分，所以在这种情况下，我不知道如何做我的ng-repeat，我在想这样的事情：

ng-repeat="data in SendData()"

But It's not working.

但它不起作用。

3 个解决方案

#1

If you are using controller as syntax change $scope to 'this'

如果您使用控制器作为语法将$ scope更改为'this'

var self = this;
self.SendData = function(){

    $http.post('http://localhost:8080/xxx/xxx/', data, config)

    .success(function (data, status, headers, config) {
        self.PostDataResponse = data;
        console.log("Success");
        console.log("Status code: " + status);

    })
    .error(function (data, status, header, config) {
        //$scope.ResponseDetails = "Data: " + data +
            console.log("Error");
            console.log("Status: " + status);
            console.log("Headers: " + header);
    });

};
self.SendData();

And use your view model as declared on controller as

并使用您在控制器上声明的视图模型

<tr ng-repeat="data in vm.PostDataResponse.result"> </tr>

#2

There are two ways of declare and use the controllers. From the ngController documentation

有两种声明和使用控制器的方法。来自ngController文档

Two different declaration styles are included below:

下面列出了两种不同的声明样式：

• one binds methods and properties directly onto the controller using this: ng-controller="SettingsController1 as settings"
• 一个方法和属性直接绑定到控制器上使用：ng-controller =“SettingsController1 as settings”
• one injects $scope into the controller: ng-controller="SettingsController2"
• 一个将$ scope注入控制器：ng-controller =“SettingsController2”

The second option is more common in the Angular community, and is generally used in boilerplates and in this guide. However, there are advantages to binding properties directly to the controller and avoiding scope.

第二种选择在Angular社区中更为常见，通常用于样板和本指南中。但是，将属性直接绑定到控制器并避免范围是有好处的。

You will need to change the code in your controller to the following:

您需要将控制器中的代码更改为以下内容：

angular.module('app',['dcafe.navigation','ui.bootstrap']).controller('HeadlineReportController',
 function($http,$interpolate,$filter,datafactory,d3Factory,$timeout){

//code
var vm = this;

$vm.SendData = function(){

    $http.post('http://localhost:8080/xxx/xxx/', data, config)

    .success(function (data, status, headers, config) {
        $scope.PostDataResponse = data;
        console.log("Success");
        console.log("Status code: " + status);

    })
    .error(function (data, status, header, config) {
        //$scope.ResponseDetails = "Data: " + data +
            console.log("Error");
            console.log("Status: " + status);
            console.log("Headers: " + header);
    });
};
vm.SendData();

});

}）;

And your ng-repeat will change to ng-repeat="data in vm.SendData()"

你的ng-repeat将改为ng-repeat =“vm.SendData（）中的数据”

#3

They are using the Controller As syntax in the view when they say <span ng-controller="HeadlineReportController as vm">.

当他们说时，他们在视图中使用Controller As语法。

Controller As is something you should look in to; John Papa has a good explanation here.

控制器你应该注意的事情;约翰帕帕在这里有一个很好的解释。

From your view, you would then reference controller variables like vm.SendData(). Also, with Controller As, you will not have $scope variables in your controller.

从您的角度来看，您将引用控制器变量，如vm.SendData（）。此外，使用Controller As，您的控制器中不会有$ scope变量。