如何在我的控制器中使用ng-click变量？

Question

我有一个看起来像这样的指令

a = addNodeLimitAction(m, tr("No Minimum"), 0.0);
// Unlimited node cost easily produces huge graphs such that 'dot'
// would need a long time to layout. For responsiveness, we only allow
// for unlimited node cost if a caller and callee depth limit is set.
a->setEnabled((_maxCallerDepth>=0) && (_maxCalleeDepth>=0));

现在在我的控制器中。

 <a href ng-click="metric='Distance'; metricshow=false;" >
 <a href ng-click="metric='Time'; metricshow=false;">

console.log（）给了我undefined。为什么？

Answer 1

创建控制器时，您没有为$scope.metric分配任何内容，因此控制台日志未定义。

现在，如果你有类似的东西：

<a href ng-click="doSomething()" >

HTML中的

，例如：

$scope.doSomething = function() {
    $scope.metric='Distance'; 
    $scope.metricshow=false;
    console.log($scope.metric);
}

在您的控制器中，您将响应ng-click。

Answer 2

所以，正如其他答案所说的那样，因为console.log正在立即执行。

我想多说几点：

1. 使用ng-click代替内联js代码的函数更好。
2. 在HTML中，您可以使用{{variable}}进行$scope插值。
3. 有$watch个功能。

$scope插值

所以$scope是控制器和控制器上的JS代码之间的粘合剂。您不需要放置{{$scope.variable}}，因为$scope成为标记处的全局变量。

这适用于app逻辑，例如在使用ng-repeat时非常有用，或仅用于快速调试。

$watch函数

你可以在你的控制器上：

$scope.$watch('metric', function(newValue, oldValue){
  console.log("$scope.metric just changed from " + oldValue + " to " + newValue);
});

这对于更加软化的应用程序逻辑，工作流程和控制非常有用。但是你不应该为调试做这件事。

关于您最后评论已执行的问题，请查看有关数据绑定和摘要周期的文档。

Answer 3

当您的控制器首次运行时，$ scope.metric变量未创建，也未分配给任何内容。您可能还希望不在视图中使用逻辑，而是使用函数。

指令：

 <a href ng-click="setMetric('Distance')" >
 <a href ng-click="setMetric('Time')">

 <a href ng-click="getMetric()">

现在在你的控制器中：

$scope.setMetric = function (type) {
  $scope.metric = type;
}

$scope.getMetric = function () {
  console.log($scope.metric);
}

Working Plunker with some additions

Answer 4

晚会，但根据您的原始代码，我创造了类似的情况。

 <a href ng-click="metric('Distance')" >
 <a href ng-click="metric('Time');">



 <script>
    $scope.metric = function(_parm){
        switch(_parm){
            case 'Distance': 
                console.log('Distance');
                $scope.metricshow = false;
                break;
            case 'Time' :
                console.log('Time');
                $scope.metricshow = false;
                break;
        }
    }
 </script>

供您参考，使用ng-click调用函数，然后更改那里的变量。在HTML方面更可读，更漂亮！