错误:无法找到指令“ngShow”所要求的[$compile:ctreq]控制器'ngModel‘

Question

嗨，我是刚接触到angularjs，并试图在点击提交按钮时调用一个函数。

我的HTML :

<div class="form-group">
                    <a href="#" ng-click="showGraph = !showGraph" class="btn btn-primary btn-lg" ng-disabled="!model.selectedRole">SUBMIT</a>
                    </div>
            </form>
        </div>  
    </div><! end of previous div -->

<div class="col-sm-6"> <!-- new div -->
            <div class="panel panel-primary"> 
                <div class="panel-heading" style="background-color:#F8F8FF; text-decoration:none; color:black"><b>Chart</b></div>
                <div class="panel-body" ng-change="HeadCount()" ng-show="showGraph">

          <plot class="barchart" height="300" width="400" yaxis-label-text="'No. of Students'"
                          xaxis-label-text="'standards'" ymin="0" ymax="100" xodomain="ordinals" >
                        <bar-group  type="'grouped'" arrangement="'vertical'" style="opacity:100;">
                            <bars  data="available_students" position-function="'/0'" value-function="'/1'"
                                  fill="'red'"></bars>
                            <bars data="maximum_students" position-function="'/0'" value-function="'/1'" fill="'blue'" ></bars>
                        </bar-group>

                    </plot>
                </div>

          </div>
           </div> <!-- end of new div -->

这里我使用ng-click="showGraph = !showGraph"在我的控制器中调用我的showGraph。

我的控制器页

$scope.showGraph = false;

 $scope.HeadCount = function(){

            var json_response =  {

                      "data": [
                        {
                          "standard": "Ist",
                          "max_students": 20,
                          "available_students": 8
                        },
                        {
                          "standard": "IInd",
                          "max_students": 15,
                          "available_students": 10
                        },
                        {
                          "standard": "IIIrd",
                          "max_students": 50,
                          "available_students": 22
                        }
                      ]
                    } 
     $scope.available_students = [ ['Ist', 8,], ['IInd', 10], ['IIIrd', 22]];
     $scope.maximum_students = [['Ist', 15], ['IInd',15], ['IIIrd', 50]];
     $scope.ordinals = ['Ist', 'IInd', 'IIIrd'];
     console.log($scope.ordinals.length);
     $cookieStore.put('xaxisLength',$scope.ordinals.length);

    }

在单击submit按钮后，我需要从控制器调用HeadCount()函数来显示图表。

但我得到以下错误，当我点击提交按钮表单是刷新。

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngShow', can't be found!

有人能帮我做些改变吗。

Answer 1

ng-change指令需要ng模型指令。在这一行中添加ng模型：

<div class="panel-body" ng-change="HeadCount()" ng-show="showGraph">

阅读更多这里

Answer 2

控件的单击设置$scope.showGraph和图形呈现代码。

从div下面开始乘坐ng-change。

<div class="panel-body" ng-show="showGraph">

HTML:将renderGraph添加到ng-click中。

<a href="#" ng-click="renderGraph()" class="btn btn-primary btn-lg" ng-disabled="!model.selectedRole">SUBMIT</a>

JS:在这里设置$scope.showGraph。

  $scope.renderGraph = function(){
    $scope.showGraph = !$scope.showGraph;
    if($scope.showGraph) {
        var json_response =  {
          "data": [
            {
              "standard": "Ist",
              "max_students": 20,
              "available_students": 8
            },
            {
              "standard": "IInd",
              "max_students": 15,
              "available_students": 10
            },
            {
              "standard": "IIIrd",
              "max_students": 50,
              "available_students": 22
            }
          ]
        };
         $scope.available_students = [ ['Ist', 8,], ['IInd', 10], ['IIIrd', 22]];
         $scope.maximum_students = [['Ist', 15], ['IInd',15], ['IIIrd', 50]];
         $scope.ordinals = ['Ist', 'IInd', 'IIIrd'];
         console.log($scope.ordinals.length);
         $cookieStore.put('xaxisLength',$scope.ordinals.length);
    }

};

Answer 3

ng-更改不能在ng-show指令更改上调用.只有当绑定元素发生更改时，才会调用它。因此，您需要将ng更改放在输入元素元素中，该元素使用ng模型与其绑定。

在您的示例中，需要调用该行中的HeadCount()

<a href="#" ng-click="HeadCount(); showGraph = !showGraph" class="btn btn-primary btn-lg"           ng-disabled="!model.selectedRole">SUBMIT</a>

我希望这能帮上忙。