AngularJS:页面中的值不会在单击时显示在模态中

时间:2014-05-14 12:19:01

标签: angularjs

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

这里是plunkr

这是我的控制人员:

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>

2 个答案:

答案 0 :(得分:1)

您的观点中有一个拼写错误:

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

...其中ntask应为nTask。修复后,您将不需要$scope.apply()

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

答案 1 :(得分:0)

替换

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

使用

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

这样做,并捕获用户添加的任何新文本。