[AngularJS]$scope 数据从控制器以查看传递

发布时间: 2017/4/16 21:37:41
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想要显示 $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>

解决方法 1:

ng-controller="TestController as test"body 标签。

也因为使用的 controller as 语法时使用控制器,所以里面的控制器上下文值 ( this ) 在 HTML 上由其别名访问 test{{test.predicate}}; reverse = {{test.reverse}} 应该工作。

但从技术上讲,你不应该使用两个 $scope & this 中同时使用同一控制器 controller as ,这又会造成混乱。所以我会建议你改变 $scopevm

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