AngularJS ng-if 在条件为真时不工作

Question

我正在为 Coursera AngularJS 单页应用程序使用 angular.min.js 1.8.2。

我创建了一个 itemAdder 来由用户添加购物清单，这些项目将显示在 showList 中。 一旦你购买了物品，你可以点击购买按钮将购买列表放入购买列表。

如果所有的东西都被买了，应该有一条消息说“一切都被买了”，它应该由 ng-if 控制，现在它不起作用。

谁能看出问题所在？

谢谢你。

HTML:

 <!-- some code here -->
 <!-- To Buy List -->
    <div class="col-md-6" ng-controller='ShoppingListAddController as itemAdder'>
      <h2>To Buy:</h2>
      <input type="text" ng-model="itemAdder.itemName" placeholder="item name">
      <input type="text" ng-model="itemAdder.itemQuantity" placeholder="quantity">
      <button ng-click="itemAdder.addItem();" class="btn btn-default">Add Item To Shopping List</button>
   
        <ul ng-controller='ShoppingListShowController as showList'>
          <li ng-repeat="item in showList.items">
            {{ item.quantity }} of {{ item.name }}
            
            <button ng-click="showList.removeItem($index);" class="btn btn-default">Remove Item</button>
            <button ng-click="showList.addBoughtItem($index);" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span> Bought</button>

          </li>
          
        </ul>
        
            <!-- This is the ng-if not working -->
           <div  class="emptyMessage" ng-if="itemAdder.checkAllBought()">Everything is Bought!</div>
  
    </div>

<!-- code after -->

应用程序.js：

(function () {
    'use strict';

    angular.module('ShoppingListCheckOff', [])
        .controller('ShoppingListAddController', ShoppingListAddController)
        .controller('ShoppingListShowController', ShoppingListShowController)
        .controller('ShoppingListBoughtController', ShoppingListBoughtController)
        .service('ShoppingListCheckOffService', ShoppingListCheckOffService);

    ShoppingListAddController.$inject = ['ShoppingListCheckOffService'];
    function ShoppingListAddController(ShoppingListCheckOffService) {
        var itemAdder = this;

        itemAdder.itemName = "";
        itemAdder.itemQuantity = "";

        itemAdder.addItem = function () {
            ShoppingListCheckOffService.addItem(itemAdder.itemName, itemAdder.itemQuantity);
        };

        itemAdder.checkAllBought = function(){
            ShoppingListCheckOffService.checkAllBought();

        }

    };

    ShoppingListShowController.$inject = ['ShoppingListCheckOffService'];
    function ShoppingListShowController(ShoppingListCheckOffService) {
        var showList = this;
        
        showList.items = ShoppingListCheckOffService.getItems();
        showList.boughtItem = ShoppingListCheckOffService.getBoughtItems();

        showList.removeItem = function (itemIndex) {
            ShoppingListCheckOffService.removeItem(itemIndex);
        };

        showList.addBoughtItem = function (itemIndex) {
            ShoppingListCheckOffService.addBoughtItem(itemIndex); 
        };

    };

    ShoppingListBoughtController.$inject = ['ShoppingListCheckOffService'];
    function ShoppingListBoughtController(ShoppingListCheckOffService) {
        var boughtList = this;

        boughtList.boughtItems = ShoppingListCheckOffService.getBoughtItems();

    };

    function ShoppingListCheckOffService() {
        var service = this;

        // List of shopping items
        var items = [];
        var count = 0;
        var boughtItems = [];


        service.addItem = function (itemName, quantity) {   
            var item = {
                name: itemName,
                quantity: quantity
            };
            items.push(item);
            count++;
            console.log("addItem",count);

        };

        service.removeItem = function (itemIndex) {
            items.splice(itemIndex, 1);
            count--;
            console.log("removeItem",count);

        };

        service.getItems = function () {
            return items;
        };

        service.addBoughtItem = function (itemIndex) {
            var boughtItem = {
                name: items[itemIndex].name,
                quantity: items[itemIndex].quantity
            };
            boughtItems.push(boughtItem);
            items.splice(itemIndex, 1);
            count--;
            console.log("addBought",count);

        };  
        
        service.checkAllBought = function(){
            var done = false;
            console.log("bought items",boughtItems.length);
            console.log("items",items.length);
            console.log("done before if",done);

            if ( items.length == 0  && boughtItems.length >0){
                done = true; 
            };
            console.log("bought items after if",boughtItems.length);
            console.log("items after if",items.length);
            console.log("done after if",done);
            return done;
            
        }; 
    
        service.getBoughtItems = function () {
            return boughtItems;
        };

    };
}) ();

这是初始加载时的调试图像这是购买列表中所有项目之后的 console.log如我们所见，done 变为 true 但div where ng-if="itemAdder.checkAllBought()"不起作用。 您还可以在此处查看带有源代码的页面： github page

Answer 1

正确的指令*ngIf

<div  class="emptyMessage" *ngIf="itemAdder.checkAllBought()">Everything is Bought!</div>