AngularJS

Question

我正在努力阻止 ng-click 在调用事件取消后计算其余表达式。

我做了以下 plnkr。

如果您单击 "Click me" 文本，您会看到该值正在发生变化，尽管 clickMe 函数正在调用所有已知方法（至少是我调用的方法）来停止事件。

标记：

 <body ng-controller="Home" ng-init="model = { value: false }">
    <div ng-click="clickMe($event); model.value = true;">Click me!!</div>
    {{ model.value }}
  </body>

应用程序：

APP.controller('Home', function($scope){
  $scope.clickMe = function($event){
    $event.stopPropagation();
    $event.preventDefault();
    return false;
  }
})

我知道我可以将参数传递给 clickMe 函数，如果 "isOK" 为假，则更新我需要的内容，但由于与我的应用程序相关的许多原因，我尽量不这样做。

更新

在我的应用程序中，我在 ng-click 上有类似的东西

model.PS.title = value; model.PS.desc = value2; model.PS.isSce = value3

我瞎了，我看不出我可以像这样把它变得更简单：

model.PS = { title: value, desc: value2, isSce: value3 }

... 在这种情况下，我可以将 shorthand 表达式用于 if 语句，如 @Emmanuel 提到的。

我在想 ngClick 会像函数块一样评估其中的表达式，所以如果它遇到 return false（或类似的东西）它就停在那里。

Answer 1

怎么样

<body ng-controller="Home" ng-init="model = { value: false }">
    <div ng-click="model.value = clickMe($event) ? true : model.value;">Click me!!</div>
    {{ model.value }}
</body>

保留应用程序原样

APP.controller('Home', function($scope){
  $scope.clickMe = function($event){
    $event.stopPropagation();
    $event.preventDefault();
    return false;
  }
})

Answer 2

您可以在运行您的点击处理程序 $scope.$eval 之后评估您的表达式。

您可以在点击对您的点击处理程序有效后将您想要运行的表达式传递给您的点击处理程序，并根据您的 isOK 变量计算表达式。

我稍微扩展了演示以展示 $eval 的功能。

请查找更新的 plunkr here。

HTML

 <body ng-controller="Home" ng-init="model = { value: false }; model2 = {value:true}">
     <div ng-click="clickMe($event, 'model.value = true; model2.value = false;');">Click me!!</div>
     {{ model.value }}

     {{ model2.value }}
     <br/>
     check to enable click me!
     <input type="checkbox" ng-model='isOK'/>
 </body>

JS

var APP = angular.module('myApp', []);

APP.controller('Home', function($scope){
       //var isOk = true;
        $scope.isOK = false;

        $scope.clickMe = function($event, args){

        if($scope.isOK){
            console.log(args);
            $scope.$eval(args);
            return false;
        } else {
            console.log('isOk false:', args);
        }
    }
});

AngularJS - 在 $event.stopPropagation 之后停止 ng-click 表达式计算

AngularJS - stop ng-click expression evaluation after $event.stopPropagation

javascript

events

angularjs-ng-click

更新