角度NG-如果未按预期响应

Question

我有li元素，这些元素有一个绑定到复选框的ng-if语句。如果我物理地选中该复选框，ng-if将按预期响应。但是，如果我通过JavaScript选中或取消选中复选框，则复选框会按预期被选中或取消选中，但ng-if没有响应。这是正常工作吗？有没有更好的办法做到这一点？

下面是我的代码示例：“[]”=“<>”

HTML-第1部分

[li id=“HomeButton”ng-if=“HomeChecked！=true”onclick=“HomeChecked（）”][a ng-href=“/”][img src=“images\neck01home.png”alt=“home”/][/a]

[li id=“TheBandButton”ng-if=“HomeChecked===true”onclick=“TheBandClicked()”][a ng-href=“/TheBand/”][img src=“images\neck01TheBand.png”alt=“The Band”/][/a]

HTML-第2部分

[label class=“MenuController”]Home2:[input class=“MenuController”id=“HomeCb”type=“checkbox”ng-model=“HomeChecked”ng-init=“HomeChecked=true”/][/label][br/]

[label class=“MenuController”]TheBand2:[input class=“MenuController”id=“BandCb”type=“checkbox”ng-model=“TheBandChecked”/][/labe][

[label class=“MenuController”]Gallery2:[input class=“MenuController”id=“GalleryCB”type=“checkbox”ng-model=“GalleryChecked”/][/label][br/]

JavaScript：

window.onload = function () {
}

function homeclicked() {
    document.getElementById('homecb').checked = true;
    document.getElementById('bandcb').checked = false;
    document.getElementById('gallerycb').checked = false;
}

function thebandclicked() {
    document.getElementById('homecb').checked = false;
    document.getElementById('bandcb').checked = true;
    document.getElementById('gallerycb').checked = false;
}

function galleryclicked() {
    document.getElementById('homecb').checked = false;
    document.getElementById('bandcb').checked = false;
    document.getElementById('gallerycb').checked = true
}

Answer 1

用适当的角度来做。

移动控制器中的函数。通过ng-click调用它们。让函数更改绑定到复选框的作用域变量。

<li id="homebutton" ng-if="homechecked != true" ng-click="homeclicked()">

同时在你的范围内...

$scope.homeclicked = function  {
    $scope.homechecked = true;
    $scope.thebandchecked = false;
    $scope.gallerychecked = false;
}

如果您真的真的想无视我的建议，继续使用您所拥有的东西，顺便说一句，这是非常糟糕的，您可以在函数中添加这一行:Angular.Element(document.getElementById('homecb')).$scope().$apply()；这也是非常糟糕的，应该完全避免。

Answer 2

您这样做是错误的，ng-if没有触发，因为您只操作复选框的选中和未选中（使用javascript）而不是ng-model，所以不要尝试使用javascript来做这件事，而是在您的angular Controller上做。

控制器：

$scope.homeclicked = function() {
  $scope.homechecked = true;
  $scope.thebandchecked = false;
  $scope.gallerychecked = false;
};

ng-model on checkbox输入处理checked和unchecked，还有一个本机指令https://docs.angularjs.org/api/ng/directive/ngchecked用于处理checked和uncheck。