Question

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

这是该应用的控制器

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

});

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

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

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

所以我尝试像在我的workig app中那样进行ng-repeat，如下所示：

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

但正如你在$ scope.SendData = function（）{}

上面的控制器中看到的那样

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

ng-repeat="data in SendData()"

但它没有用。

Answer 1

如果您使用控制器作为语法，请将$ 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();

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

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

Answer 2

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

下面列出了两种不同的声明风格：


使用将方法和属性直接绑定到控制器上   这个：ng-controller =“SettingsController1 as settings”

一次注射   $ scope进入控制器：ng-controller =“SettingsController2”


第二种选择在Angular社区中更常见，而且是   通常用于锅炉板和本指南。但是，有   将属性直接绑定到控制器的优点   避免范围。

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

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

}）;

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

Answer 3

当他们说<span ng-controller="HeadlineReportController as vm">时，他们在视图中使用Controller As语法。

控制器你应该注意的事情; John Papa has a good explanation here

从您的视图中，您将引用控制器变量，如vm.SendData()。此外，使用Controller As，您的控制器中不会有$scope个变量。

用角度绑定数据。（将方法调用到视图中）

3 个答案:

用角度绑定数据。 （将方法调用到视图中）

3 个答案:

用角度绑定数据。（将方法调用到视图中）