错误$compile：找不到指令"ngShow"所需的控制器"ngModel"

Question

嗨，我是 angularjs 的新手，并尝试在单击提交按钮期间调用函数。

我的网页 ：

<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);
}

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

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

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

任何人都可以在我需要进行更改的地方帮助我。

Answer 1

ng-change指令需要一个ng-model指令。将 ng 模型添加到此行：

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

在此处阅读更多内容

Answer 2

在单击 a 时设置$scope.showGraph和图形呈现代码。

从下面乘坐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-change不能在ng-show指令change上调用。 仅当绑定元素将更改时才会调用它。因此，您需要使用 ng-model 将 ng-change 放在与其绑定的输入元素元素中的某个位置。

在您的情况下，您需要在此行中调用 HeadCount()

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

我希望这会有所帮助.