Question

我是angularjs的新手。我知道如何在控制器和视图之间传递数据，反之亦然。

在node.js中，我们可以使用express.js使用数据呈现html文件。

angularjs是否可以做同样的事情？

例如：

$scope.edit = function(id) {
    EmployeeService.editEmployee(id).then(function (response) {
        if(!response) {
            console.log("no response");
        } else {
            console.log(response.data);
        }
    }, function (err) {
        if(err) {
            console.log(err);
        }
    });
};

在上述逻辑中，我需要使用 response.data 呈现“ edit.html ”文件。

Answer 1

您可以简单地使用ng-include指令来实现此目的：

index.html

<html>
  <head>
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="myApp" ng-cloak>
    <div ng-controller="MainCtrl">
      <div id="all-employees" ng-show="!selectedEmployee">
        <table>
          <thead>
            <tr>
              <td>ID</td>
              <td>Name</td>
              <td>Age</td>
              <td>Options</td>
            <tr>
          </thead>
          <tbody>
            <tr ng-repeat="employee in employees">
              <td>{{ $index }}</td>
              <td>{{ employee.name }}</td>
              <td>{{ employee.age }}</td>
              <td><button ng-click="edit($index)">Edit</button></td>
            <tr>
          </tbody>
        </table>
      </div>

      <div id="selected-employee" ng-hide="!selectedEmployee">
        <div ng-include="'views/edit.html'"></div>
        <button ng-click="selectedEmployee = undefined">Back</button>
      </div>
    </div>
  </body>
</html>

lib / script.js

angular.module('myApp', []).controller('MainCtrl', function($scope, EmployeeService) {

  $scope.employees = [
    {name: 'test', age: 24},
    {name: 'guest', age: 29},
    {name: 'fest', age: 39}
  ];

  $scope.edit = function(index) {
    EmployeeService.editEmployee(id).then(function (response) {
        if(!response) {
          console.log("no response");
        } else {
          $scope.selectedEmployee = response.data;
        }
    }, function (err) {
        if(err) {
          console.log(err);
        }
    });
  };

  $scope.unsetSelection = function() {
    $scope.selectedEmployee = undefined;
  };
});

views / edit.html

<div>
  <h3>Employee Detail</h3>
  <div>{{ selectedEmployee.name }}</div>
  <div>{{ selectedEmployee.age }}</div>
</div>

如何从angularjs的控制器中调用HTML文件？

1 个答案: