AngularJS - 隐藏表格模板，直到使用自定义指令提交表格

Question

我有以下代码，它会发出PUT请求，并在服务器中显示 已修改的数据。此时，当页面加载时，将显示一个空表，直到点击该按钮。

我需要的是，表格被隐藏，直到按钮被点击。 如何完成此操作？

<div ng-app="myApp" ng-controller="formController"> 
<script type="text/ng-template" id="tableTemplate.html"> 
<table> 
    <thead> 
     <tr> 
      <th>id</th> 
      <th>email</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="x in names"> 
      <td>{{ x.id }}</td> 
      <td>{{ x.email }}</td> 
      <tr> 
    </tbody> 
</table> 
</script> 

<form ng-submit="processForm()">id : 
    <input type="text" name="id" ng-model="formData.id">email : 
    <input type="email" name="email" ng-model="formData.email"> 
    <input type="submit" value="go"> 
</form> 
<div my-directive></div> 

</div> 

<script> 
var app = angular.module('myApp',[]); 

app.directive('myDirective', function() { 
    return { 
     replace: true, 
     restrict: 'EA', 
     templateUrl: 'tableTemplate.html' 
    } 
    }); 

app.controller("formController", function($scope,$http) { 
    $scope.formData = {}; 
    $scope.processForm = function(){ 
    // PUT /users/id 
    var url = 'http://www.example.com/users/' + $scope.formData.id; 
    var data = '{"email":"' + $scope.formData.email}'; 
    $http({method: 'PUT', url: url, data: data}).success(function(response){ 
     $scope.names = response; 
    }); 
    } 
}); 
</script> 

Answer 1

在HTML：

<table ng-show="formSubmitted"> 

在控制器$httpsuccess()功能：

$scope.formSubmitted = true;