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

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/