javascript - AngularJS 设置 html 属性

Question

我们是 JavaScript 和 AngularJS 的新手，但场景非常简单。我们想要设置从 REST 服务接收的 html 属性。

这是我们的 profileController.js:

angular
        .module('app')
        .controller('profileController', ['$scope', '$http', '$window', function($scope, $http) {

        // REST service works properly
    var resource = 'http://localhost:8080/user';

    $http.get(resource).then(function(result){

            // logs right json
            console.log(result);

            // no effect
            $scope.content = result.data.toString();

            // no effect
            if(!$scope.$$phase) {
                $scope.$apply();
            }
        });

} ]);

个人资料.html

<div>
    <div class="container">
        <br><br><br>
        <h2 class="sub-header">Profile</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Forename</th>
                    <th>Name</th>
                    <th>Role</th>
                    <th>E-Mail</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{profile.data}}</td>
                    <!-- Doesn't work as well
                    <td>{{profile.forename}}</td>
                    <td>{{profile.lastname}}</td>
                    <td>{{profile.role}}</td>
                    <td>{{profile.email}}</td>-->
                </tr>
                <div id="container" ng-controller="profileController">
                    <content-item forename="item"></content-item>
                </div>
                </tbody>
            </table>
        </div>
    </div>
</div>

REST服务正常工作并发送回json，JavaScript控制台中的日志输出是正确的，只是html中的设置不起作用，我们完全没有线索。

提前致谢!

Answer 1

考虑这个Plunk .

app.controller("myController", [
      "$scope",
      function($scope){

        $scope.content = [
          {
            "firstname": "Natalie",
            "lastname": "Portman",
            "role": "Accountancy",
            "email": "n.p@email.com"
          },
          {
            "firstname": "Johnny",
            "lastname": "Depp",
            "role": "Sales Management",
            "email": "j.d@email.com"
          },
          {
            "firstname": "Kevin",
            "lastname": "Costner",
            "role": "Crisis control",
            "email": "k.c@email.com"
          },
        ];
      }]);

上面的 $scope.content 是 $scope.content = result.data; 的硬编码模拟。

及用法:

<tr ng-repeat="profile in content">
  <td>#</td>
  <td>{{profile.firstname}}</td>
  <td>{{profile.lastname}}</td>
  <td>{{profile.role}}</td>
  <td>{{profile.email}}</td>
</tr>

检查 Plunk获取完整代码。

PS:我将示例中的 {{profile.data}} 更改为 #，因为我不知道它应该是什么。