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

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" ，并且不要在controller中使用this语法。
当您删除as vm ，则无需使用vm. 电话。
您需要在控制器中注入$http以进行API调用

看到这个小提琴演示，我在控制台中为每次“提交”点击记录了伪文本。

并进行一次提交，请参阅此提琴

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或其他事件。

并且不要在tr创建td或th子元素以外的元素。

这是正确的html表结构：

<table>
 <tr>
   <th>Month</th>
   <th>Savings</th>
 </tr>
 <tr>
   <td>January</td>
   <td>$100</td>
 </tr>
</table>

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-05-15 11:39:47

解决方案2
0 2017-05-15 11:17:45

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-05-15 11:39:47

解决方案2 0 2017-05-15 11:17:45

解决方案1
1 已采纳 2017-05-15 11:39:47

解决方案2
0 2017-05-15 11:17:45