Question

我想从视图中调用控制器功能。我的观点是这样的：

   <body>
   <div ng-app="appTable">
      <div ng-controller="Allocation">
         <button ng-click="add()"> Add </button> 
         <button ng-click="remove()">remove</button>
         <table>
            <th>
            <td>Date</td>
            <td>Project</td>
            <td>Release</td>
            <td>Feature</td>
            <td>Module name</td>
            <td>Hours spent</td>
            <td>Comment</td>
            </th>
            <tr ng-repeat="data in dataList">
               <td><input type="checkbox" ng-model="data.isDelete"/></td>
               <td>
                  <input type="text"
                     datepicker
                     ng-model="data.date" />                 
               </td>
               <td><input type="text" ng-model="data.dept"/></td>
               <td>
                  <select ng-model="data.release" ng-options="x for x in range">
                  </select>
               </td>
               <td>
                  <select ng-model="data.feature" ng-options="x for x in feature">
                  </select>
               </td>
               <td>
                  <input type = "text" ng-model = "data.modulename">
               </td>
               <td>
                  <select ng-model="data.hours" ng-options="x for x in hours">
                  </select>
               </td>
               <td>
                  <input type = "text" ng-model = "data.comment">
               </td>
            </tr>
         </table>
         <button ng-click="Submit()">Submit</button>
         <table>
            <tr ng-repeat="data in displayList">
               <div ng-controller="Allocation as vm">
                  <div>{{vm.postdata(data.date)}}</div>
               </div>
               <p>Output Message : {{msg}}</p>
               <p>StatusCode: {{statusval}}</p>
               <p>Status: {{statustext}} </p>
               <p>Response Headers: {{headers}} </p>
               <td>
                  <p>{{data.date}}</p>
               </td>
               <td>
                  <p>{{data.dept}}</p>
               </td>
               <td>
                  <p>{{data.release}}</p>
               </td>
               <td>
                  <p>{{data.feature}} </p>
               </td>
               <td>
                  <p>{{data.modulename}}</p>
               </td>
               <td>
                  <p>{{data.hours}}</p>
               </td>
               <td>
                  <p>{{data.comment}}</p>
               </td>
               </td>
            </tr>
         </table>
      </div>
   </div>
</body>

这是剧本。

<script>
    var app = angular.module("appTable", []);

    app.controller("Allocation", function($scope) {
        $scope.hours = ["1", "2", "3"];
        $scope.range = ["1", "2", "3"];
        $scope.feature = ["UT", "FSDS", "Coding/Devlopment", "QA"];

        $scope.dataList = [{
            date: '17/07/2016',
            dept: 'OneCell',
            release: '1',
            feature: "UT",
            modulename: "Redundancy",
            hours: "1",
            comment: "Add extra information"
        }];

        $scope.add = function() {
            var data = {};
            var size = $scope.dataList.length;
            if (!size) {
                $scope.dataList = [{
                    date: '17/07/2016',
                    dept: 'OneCell',
                    release: '1',
                    feature: "UT",
                    modulename: "Redundancy",
                    hours: "1",
                    comment: "Add extra information"
                }];
            } else {
                size = size - 1;
                data.date = $scope.dataList[size].date;
                data.dept = $scope.dataList[size].dept;
                data.release = $scope.dataList[size].release;
                data.feature = $scope.dataList[size].feature;
                data.modulename = $scope.dataList[size].modulename;
                data.hours = $scope.dataList[size].hours;
                data.comment = $scope.dataList[size].comment;
                $scope.dataList.push(data);
            }

        };

        $scope.Submit = function() {
            $scope.test = "Submit is pressed...";
            $scope.displayList = [];
            angular.forEach($scope.dataList, function(v) {
                if (!v.isDelete) {
                    $scope.displayList.push(v);
                }
            });
            $scope.dataList.splice(0);


        };
        $scope.remove = function() {
            var newDataList = [];
            angular.forEach($scope.dataList, function(v) {
                if (!v.isDelete) {
                    newDataList.push(v);
                }
            });
            $scope.dataList = newDataList;
        };

        $scope.postdata = function(date) {

            var data = {
                date: date,
            };
            $http.post('/add_status/', data).then(function(response) {
                if (response.data)
                    $scope.msg = "Post Data Submitted Successfully!";
            }, function(response) {
                $scope.msg = "Service not Exists";
                $scope.statusval = response.status;
                $scope.statustext = response.statusText;
                $scope.headers = response.headers();
            });
        };


    });


    app.directive("datepicker", function() {

        function link(scope, element, attrs, controller) {
            // CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
            element.datepicker({
                onSelect: function(dt) {
                    scope.$apply(function() {
                        // UPDATE THE VIEW VALUE WITH THE SELECTED DATE.
                        controller.$setViewValue(dt);

                    });
                },
                dateFormat: "dd/mm/yy" // SET THE FORMAT.
            });
        }

        return {
            require: 'ngModel',
            link: link
        };
    });
</script>

正如你在视图中看到的那样，我调用了控制器的postdata函数。这个函数内部使用了msg变量。但是视图不打印这个变量的值。我是Aj的新手。请帮忙。

Answer 1

您需要进行以下更改：

删除ng-controller="Allocation as vm"，因为您已经在上面定义了控制器，并且您没有在控制器中使用this语法。

as vm

，则无需vm.来电。
您需要在控制器中注入$http，以进行API调用

请参阅此fiddle演示，我在控制台中为每个“提交点击”记录了虚拟文本。

并在提交时进行单一调用，请参阅此Fiddle

Answer 2

您应该在函数中返回一个值，或者添加一个范围变量以显示在控制器的div中，因为现在您没有显示任何内容。

<div ng-controller="Allocation as vm">
                  <div>{{vm.postdata(data.date)}}</div>
               <p>Output Message : {{msg}}</p>
               <p>StatusCode: {{statusval}}</p>
               <p>Status: {{statustext}} </p>
               <p>Response Headers: {{headers}} </p>
</div>

无论如何，你不应该以这种方式运行程序功能。将其绑定到事件，ng-click或其他内容。

请勿在{{1}}中创建td或th子元素以外的其他元素。

这是正确的html表结构：

tr

无法从视图中调用控制器功能

2 个答案: