从 jQuery 设置 $scope 变量的值答案

【问题标题】：Set value of $scope variable from jQuery从 jQuery 设置 $scope 变量的值
【发布时间】：2017-07-26 00:42:28
【问题描述】：

我想从 jQuery 函数为 $scope 中的变量设置一个值，如下代码所示。一切都很好，但新的价值体现在 UI 中。

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";

    $('#sample').click(function(e){
        $scope.carname = "Audi";
    });
});

这是我的完整程序：Link

如果有人帮助我，我会很高兴。

【问题讨论】：

为什么不使用ng-click处理程序

标签： javascript jquery angularjs

【解决方案1】：

为了让你的代码工作，你需要在分配$scope.carname = "Audi";之后运行$scope.$digest()

像这样：

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";

    $('#sample').click(function(e){
        $scope.carname = "Audi";
        $scope.$digest();
    });
});

这是该计划的 w3schools 链接：Link

正如下面的 cmets 中所述，您还可以使用 $scope.$apply()，如下所示：

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";

    $('#sample').click(function(e){
        $scope.$apply( function() {
            $scope.carname = "Audi";
        });
    });
});

这是该计划的 w3schools 链接：Link

您可以在以下链接中阅读有关 $scope.$digest() 和 $scope.$apply() 用例的更多信息：

注意：正如许多其他 cmets 和一些答案中所提到的，Angular 确实提供了一个内置方法来侦听 click 事件，称为 ng-click。这是它的文档：AngularJS: ngClick

【讨论】：

最好调用 $scope.$apply() 我会说 (sitepoint.com/understanding-angulars-apply-digest)
请不要只回答他的问题，还要反对他使用.click 处理程序而不是ng-click

【解决方案2】：

Angular JS 提供 ng-click 指令来处理点击事件。只需在 HTML 元素中添加 ng-click=function_name() 作为属性即可。ng-click 指令告诉 AngularJS 在点击 HTML 元素时要做什么。

示例

angular.module('myApp', [])
.controller('myCtrl',function($scope) {
    $scope.myFunc = function() {
        console.log('clicked');
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">

<div ng-controller="myCtrl">
    <button ng-click="myFunc()">Click</button>
</div>

【讨论】：

【解决方案3】：

我不确定，你为什么不使用标准的ng-click 来捕捉点击事件。请说明您是否有具体原因。但是，如果您仍想遵循 Jquery 方式，则应在更改值后立即调用角度摘要循环。使用$scope.$apply()

【讨论】：