从控制器传递 $scope 数据到视图

Question

我想在我的视图中显示 $scope.predicate 和 $scope.reverse 值（在 <p> 标记中）。似乎使用 {{ }} 表达式不起作用。

app.js:

 var app = angular.module('testApp', []);
 app.controller('TestController', function($scope,$http ){
 var vm = this;
 vm.rezdata = [];
 $http.get("some rest resource...")
      .then(function(response) {
          vm.rezdata =  response.data;
          $scope.predicate = 'username';
          $scope.reverse = true;
      });
});

HTML:

<body ng-app="testApp">
    <h1>Users table </h1>  
    <table class="table table-striped" ng-controller="TestController as test">
        <p> Sorting predicate {{predicate}}; reverse = {{reverse}} </p>
        <thead>
            <tr>
                <th>#</th>
                <th>
                    Username
                </th>
                ... 
            </tr>
        </thead>
        <tbody>     
            <tr ng-repeat="datafinal in test.rezdata" >  
                <td>{{ datafinal.id}} </td>
                <td>{{datafinal.username}} </td>
                ...
            </tr>
        </tbody>        
    </table>
</body>

Answer 1

将 ng-controller="TestController as test" 放在 body 标签上。

此外，由于您在使用控制器时使用 controller as 语法，因此控制器上下文 (this) 中的值可以在 HTML 上通过其别名 test 访问. {{test.predicate}}; reverse = {{test.reverse}} 应该可以。

但从技术上讲，您不应该在使用 controller as 的同时在同一个控制器中同时使用 $scope 和 this，这会再次造成混乱。所以我建议您将 $scope 更改为 vm。

<p>Sorting predicate {{predicate}}; reverse = {{reverse}}</p>
<table class="table table-striped" ng-controller="TestController as test">
   ...  
</table>

从控制器传递 $scope 数据到视图

Pass $scope data from controller to view

javascript

angularjs

angularjs-scope

angularjs-controller

angularjs-controlleras