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

Question

I have li elements that have an ng-if statement that is tied to a checkbox. If I physically check the checkbox, the ng-if responds as expected. However, if I check or uncheck the checkbox via JavaScript, the checkboxes get checked or unchecked as expected, but the ng-if does not respond. Is this working as it should? Is there a better way to do this?

Here are my code samples: "[]" = "<>"

HTML - Part 1

[li id="homebutton" ng-if="homechecked != true" onclick="homeclicked()"][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 - Part 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

you're doing it wrong, ng-if does not trigger because you only manipulate the checked and unchecked of the check box(using javascript) and not the ng-model, dont try to use javascript to do that, instead do it on your angular controller.

Controller:

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

ng-model on checkbox inputs handles checked and unchecked of it, also there is a native directive https://docs.angularjs.org/api/ng/directive/ngChecked for handling of check and uncheck.

Answer 2

Do it in proper angular way.

Move the functions inside your controller. Call them via ng-click . Let the functions change the scope variables which are bound to check boxes.

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

In the mean time inside your scope...

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

---

If you really really want to disregard my advice and go ahead with what you have, which is by the way very bad, you can add this line inside your functions: angular.element(document.getElementById('homecb')).$scope().$apply(); This is again very bad and should totally be avoided.

Answer 3

Use

 $scope.$apply();

It will run the digest loop and your ng-if will work as u expect.