Question

我正在关注Lynda.com上关于AngularJS基本培训的教程。

我的索引文件的一部分如下：

<div class="container" ng-controller="AppCtrl">
    <h1>AngulAir</h1>
    <ul class="nav nav-pills">
        <li role="presentation" ng-class="destinationsActive"><a href="#/" ng-click="setActive(destinations)">Destinations</a></li>
        <li role="presentation" ng-class="flightsActive"><a href="#/flights" ng-click="setActive(flights)">Flights</a></li>
        <li role="presentation" ng-class="reservationsActive"><a href="#/reservations" ng-click="setActive(reservations)">Reservations</a></li>
    </ul>
    <div ng-view>
    </div>
    <p>{{ flightsActive }}</p>
</div>

现在，当我点击任何链接时，它应该触发AppCtrl中定义的setActive函数，如下所示：

$scope.setActive = function (type) {
    $scope.destinationsActive = '';
    $scope.flightsActive = '';
    $scope.reservationsActive = '';

    $scope[type + 'Active'] = 'active';
};

现在问题很简单。该函数应该采用类型为例如'destinations'并将'Active'附加到它并将范围变量'destinationsActive'设置为active，这反过来应该反映在li标签的ng-class指令中，并且链接应该是活动的

我已尝试在将其设置为活动状态后插入alert('hello');。现在这意味着该函数确实被调用了。但是当我alert($scope.destinationsActive);时，它会给我一个空白警报，而它应该让我活跃为价值。

我没有关注练习文件，我觉得可能因为教程相对较旧，框架中可能会有变化。我已经在本教程中遇到过这样的问题。无论如何，我做错了什么？

Answer 1

在ng-click指令中，您将参数作为变量传递，而不是字符串。

ng-click="setActive(destinations)"

将传递$scope.destinations的值，这是未定义的。尝试传入一个字符串，即：

ng-click="setActive('destinations')"

请注意单引号

Answer 2

您需要在html javascript函数调用中的参数周围加上括号。

<a href="#/" ng-click="setActive('destinations')">Destinations</a>

以下是一个工作示例：JSFiddle

Answer 3

我建议你以更加语义的方式思考模型绑定。例如，使用复选框而不是链接，并将复选框值设置为ng-model代替范围变量。

<input type="checkbox" ng-model="destinations">
<input type="checkbox" ng-model="flights">
<input type="checkbox" ng-model="reservations">

然后使用模型来反映其余的更改（这是原始问题的答案，您必须在括号中指定类名和条件：

<li ng-class="{ destinationsActive: destinations }">

Answer 4

在ng-click中将参数作为字符串传递。

working code : http://jsfiddle.net/Virbhadrasinh/cLsLfkjm/

无法在Angular中设置$ scope中的值？

4 个答案: