AngularJS:单击时页面中的值未显示在模式中

AngularJS:单击时页面中的值未显示在模式中,angularjs,Angularjs,我在一个模式上有一个按钮(链接),当点击(copySummaryToTask($event))时,它应该将数据从页面的$scope元素(thisRequest)复制到模式的$scope元素(nTask)中。它将正确的数据复制到$scope中,但即使我使用$scope,数据也不会出现在模式中。$apply() 这是我的建议 这是我的控制器: var myApp = angular.module('myApp', []); myApp.controller('MainController', fu

我在一个模式上有一个按钮(链接),当点击(copySummaryToTask($event))时,它应该将数据从页面的$scope元素(thisRequest)复制到模式的$scope元素(nTask)中。它将正确的数据复制到$scope中,但即使我使用$scope,数据也不会出现在模式中。$apply()

这是我的建议

这是我的控制器:

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

myApp.controller('MainController', function($scope){

  $scope.NewTaskPane = false;

  $scope.thisRequest = {
    ID: 543,
    Title: 'Create This Wonderful SharePoint 2013 SPA',
    Request_Summary: "Rule fruit and under female she'd every signs creepeth good Night, fly lesser they're be green cattle and living tree also spirit us years two. Seasons he good under creepeth fifth air is. For morning. It creeping multiply from, saying.",
    Request_Type: 'Web'
  };

  $scope.Tasks = [
    {ID: 20, Title: 'Prototype App', Assigned_To: 'Wayne, Bruce', Status: 'Completed', TOT: 4.5},
    {ID: 21, Title: 'Develop App CSS', Assigned_To: 'Prince, Diana', Status: 'Completed', TOT: 6}  
  ];


  $scope.addNewTask = function($event){
    $event.preventDefault();
    $scope.NewTaskPane = true;
    $scope.nTask = {
        ID: $scope.Tasks.length + 1,
        Request_ID: $scope.thisRequest.ID,
        Title: $scope.thisRequest.Title,
        Status: 'Assigned',
        Resource_Instructions: ''
    };
  };

  $scope.copySummaryToTask = function($event){
    $event.preventDefault();
    //alert($scope.thisRequest.Request_Summary);
    $scope.nTask.Resource_Instructions = $scope.thisRequest.Request_Summary;
    if (!$scope.$$phase) { $scope.$apply(); }
  } // end copySummaryToTask fn

}); // end main controller
以下是观点:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <div id="overlay" data-ng-show="NewTaskPane">
        <div class ="preference_form wModal" id="frmPreference">
            <form name="frmNewTask" ng-submit="saveNewTask($event)">
                <span class="close-modal">
                    <a href="#" ng-click="NewTaskPane = false">close</a>
                </span>
                <h1>New Task</h1>
                <div class="row">
                    <div class="form-group col-lg-12">
                        <label for="description">Task Title:</label>
                        <input type="text" class="form-control" name="Title" ng-model="nTask.Title">
                    </div>
                </div>

            <div class="row">
                <div class="form-group col-lg-12">
                    <label>Additional Instructions for Resource:</label>
                    <textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>
                    <button class="btn btn-link" style="float:right;" ng-click="copySummaryToTask($event)">Copy Customer Request Summary.</button>
                </div>
            </div>

            <div class="frmElementSubmit">
                <input type="button" class="btn btn-default" value="CANCEL" ng-click="NewTaskPane = false" />
                <input type="submit" class="btn btn-primary" value="SAVE" ng-click="NewTaskPane = false" />
            </div>
        </form>

        <pre>{{nTask | json}}</pre>

        </div>
    </div>

    <div class="frmFull_Page">
        <h1 class="frmTitle">Edit Request</h1>
        <div class="frmBar clr-purple">
            <h3>Request Information</h3>
        </div>

        <div class="frm_pane">
            <div class="row">
                    <form name="EditSapForm" role="form">

                        <!-- ID / TITLE -->
                        <div class="row">
                            <div class="form-group col-lg-3">
                                <label for="req_id">Request ID:</label>
                                <input type="text" class="form-control" name="ID" ng-model="thisRequest.ID" disabled="disabled">
                            </div>
                            <div class="form-group col-lg-9">
                                <label for="title">Title:</label>
                                <input type="text" class="form-control" id="Title" ng-model="thisRequest.Title">
                            </div>
                        </div>

                        <!-- WORK SUMMARY -->
                        <div class="row">
                            <div class="form-group col-lg-12">
                                <label>Work Summary:</label>
                                <textarea name="Request_Summary" class="form-control" rows="5" ng-model="thisRequest.Request_Summary"></textarea>
                            </div>
                        </div>

                        <!-- WORK TASKS*** -->
                        <div class="row">
                            <div class="form-group col-lg-12">
                                <div class="row">
                                    <div class="form-group col lg-12" style="margin-left:16px;">
                                        <label>Work Tasks [{{Tasks.length}}]</label>
                                        <table class="table table-striped" style="width:90%; margin:5px auto;">
                                            <tr>
                                                <th>ID</th>
                                                <th>TITLE</th>
                                                <th>ASSIGNED TO:</th>
                                                <th>STATUS</th>
                                                <th>TOT</th>
                                                <th>&nbsp;</th>
                                            </tr>
                                            <tr ng-hide="Tasks.length">
                                                <td colspan="6"><b>No Tasks Found!</b></td>
                                            </tr>
                                            <tr ng-repeat="task in Tasks">
                                                <td>{{task.ID}}</td>
                                                <td>{{task.Title}}</td>
                                                <td>{{task.Assigned_To}}</td>
                                                <td>{{task.Status}}</td>
                                                <td>{{task.TOT}}</td>
                                                <td><a href="#/edittask/{{task.ID}}">edit</a></td>
                                            </tr>
                                            <tr>
                                                <td colspan="6"><a ng-click="addNewTask($event)">Add New Task</a></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- SUBMIT BUTTON*** -->
                        <div class="row" style="margin-top:30px;">
                            <div class="form-actions col-lg-12">
                                <button type="submit" class="btn btn-primary">SUBMIT</button>
                            </div>
                        </div>
                    </form>
            </div> <!-- end row -->
        </div> <!-- end frm_pane -->
    </div> <!-- end frmFull_Page-->
  </body>

</html>

新任务
任务名称:
有关资源的其他说明:
{{ntask.Resource_指令}
复制客户请求摘要。
{{nTask | json}
编辑请求
请求信息
请求ID:
标题:
工作总结:
工作任务[{{Tasks.length}}]
身份证件
标题
分配给:
地位
托特
没有找到任务!
{{task.ID}
{{task.Title}}
{{task.Assigned_To}}
{{task.Status}
{{task.TOT}
添加新任务
提交

您的视图中有一个输入错误:

$scope.copySummaryToTask = function($event){
    $event.preventDefault();
    $scope.nTask.Resource_Instructions = $scope.thisRequest.Request_Summary;
} // end copySummaryToTask fn
替换

<textarea class="form-control" rows="5" ng-model="nTask.Resource_Instructions"></textarea>
{{ntask.Resource_指令}


这样就可以了,还可以捕获用户添加的任何新文本

<textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>
<textarea class="form-control" rows="5" ng-model="nTask.Resource_Instructions"></textarea>