手动更改 url 时，data-ng-class 条件不起作用

Question

我在 data-ng-class 的 div 上做了一个条件语句，我想以某种方式将这个范围添加到控制器并指定 url 何时是 /vegetarian应用 class 'egg' 并且我手动更改 url 我想应用 class 'bacon'，但它不起作用，我在哪里出错了？

html:

<div data-ng-class="{'egg': isVeggie, 'bacon': !isVeggie }">
  Text here
</div>

控制器：

app.controller('foodCtrl', function ($scope, $location) {

  $scope.location = $location;
  $scope.isVeggie = false;


  $scope.isVeggie = function() {
    if(isVeggie === $location.path('/vegetarian')) {
      return true;
    }
  }

});

这是行不通的。当我键入 /vegetarian 时，class egg 被应用，但是当我将 url 更改为 /breakfast 之类的其他内容时，class 'egg' 仍然存在。我怎样才能使这项工作？谢谢

Answer 1

为什么属性和函数同名？毕竟你将只有功能

$scope.isVeggie = false;

$scope.isVeggie = function() {
    if(isVeggie === $location.path('/vegetarian')) {
       return true;
    }
}

更改您的代码以仅具有该功能。

仅

$scope.isVeggie = function() {
        if(isVeggie === $location.path('/vegetarian')) {
           return true;
        }
    }

和标记

<div data-ng-class="{'egg': isVeggie(), 'bacon': !isVeggie() }">
  Text here
</div>

Answer 2

您将 ng-class 指令绑定到属性 isVeggie 而不是函数 isVeggie()。

将您的 html 更改为：

<div data-ng-class="{'egg': isVeggie(), 'bacon': !isVeggie() }">
  Text here
</div>

然后您可以在控制器中删除以下行：

$scope.isVeggie = false;

手动更改 url 时，data-ng-class 条件不起作用

data-ng-class conditions is not working when changing url manually

url

controller

angularjs

route-provider

ng-class