时间戳

首页 > 解决方案 > 如何从angularjs中的控制器调用html文件？

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

问题描述

我是 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 ”文件。

标签： angularjs

解决方案

您可以简单地使用该ng-include指令来实现这一点：

索引.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;
  };
});

意见/edit.html

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

推荐阅读