Question

我想通过scala.html文件调用角度控制器。角度控制器应重定向到scala控制器以插入数据。

我通过相同的方法从数据库中获取列表。但在插入过程中，它无法调用角度控制器内的功能。

Scala html（ interns.scala.html ）：

@import repository.Interns

@(dataList:play.api.libs.json.JsValue,internForm:Form[Interns])(implicit message:Messages)

@main("List Interns"){

<div ng-app="internApp">
<div ng-controller="InternCtrl">

<table class="table">
    <tr>
        <th >Id</th>
        <th >Name</th>
        <th >Email-Id</th>
        <th >Mobile No.</th>
        <th >Address</th>
        <th >Emergency Contact No.</th>
        <th></th>
        <th><input type="submit" value="Add New Intern" class="btn btn-success" data-toggle="modal" data-target="#addIntern"> </th>
    </tr>

    <tr ng-repeat="intern in @dataList" class="danger">

        <td>{{intern.id}}</td>
        <td>{{intern.name}}</td>
        <td>{{intern.email}}</td>
        <td>{{intern.mobile}}</td>
        <td>{{intern.address}}</td>
        <td>{{intern.emergency}}</td>
        <td> <input type="submit" value="Edit" class="btn btn-primary" data-toggle="modal" data-target="#addIntern"></td>
        <td><input type="submit" value="Delete" class="btn btn-danger"> </td>

    </tr>
</table>
</div>
</div>

<div ng-app="internApp">
<div ng-controller="AddCtrl">
<div class="modal fade" id="addIntern" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" style="height:700px;text-align:center;width:500px">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h1 class="modal-title">Add Intern</h1>
        </div>


            <form>
                <input type="text" placeholder="Name" class="text" ng-model="name" size="30">
                <br>
                <br>
                <input type="text" placeholder="Email" class="text" ng-model="email" size="30">
                <br>
                <br>
                <input type="text" placeholder="Mobile Number" class="text" ng-model="mobile" size="30">
                <br>
                <br>
                <input type="text" placeholder="Address" class="text" ng-model="address" size="30">
                <br>
                <br>
                <input type="text" placeholder="Emergency Contact" class="text" ng-model="emergency" size="30">
                <br>
                <br>
                <input type="submit" class="btn btn-primary" **ng-click="save()"** value="Add Intern" >
                <br><br>
            </form>

        </div>
    </div>
</div>
</div>
</div>
<script type="text/javascript" src="@routes.Assets.versioned("javascripts/list.js")"></script>


}

角度控制器（ list.js ）：

var internApp = angular.module('internApp', []);

internApp.controller('AddCtrl', function ($scope, $http){
    alert("hello")
    $scope.save = function(){
    var data1 = {"id":8,"name":$scope.name,"email":$scope.email,"mobile":$scope.mobile,"address":$scope.address,"emergency":$scope.emergency};

    $http({
        method:'POST',
        url:'/addNew',
        data: JSON.stringify(data1),
        contentType: 'application/json',
        dataType:'json'
    })
}})

internApp.controller('InternCtrl', function ($scope, $http){
  $http.get('/list').success(function(data) {
    $scope.dataList=data;
  });
});

Answer 1

这个对我有用而没有任何问题：

https://jsfiddle.net/w3vyak05/2/

正如您所看到的 - 您看到警报，我添加了一小部分，在提交后您会看到表单下方的数据。当然，在您的应用程序中，您可以在那里进行HTTP POST调用。

与您的方法有什么不同：

我使用<form ng-submit="save()">代替ng-click。切换时要小心 - 你不想要最终混合两者：

警告：小心不要同时使用ngClick和ngSubmit处理程序导致“双重提交”。有关何时可以触发ngSubmit的详细讨论，请参阅表单指令文档。

还要记住什么（抱歉，偏离主题但不得不写下来）：

在你的代码中你有这个：<input type="submit" class="btn btn-primary" **ng-click="save()"** value="Add Intern" > - 我想你只是想引起我们对ng-click的注意，但不要忘记删除星号。

您的列表已填充，因为这是加载Angular控制器后执行的唯一“操作”（只是想解释为什么一个控制器正在工作而另一个控制器没有工作）。

您正在使用不同的语法来发出HTTP POST和GET请求 - 尝试只关注一个变体。你的未来你会感谢你:)）

使用scala进行角度调用，播放

1 个答案: