javascript - 访问指令 Angular 中的范围 Controller 变量

Question

我想访问指令链接属性中的范围变量total。

尽管总值(value)在 mouseDown 事件被触发时更新，但 $scope.total 没有改变。

这是代码

功能:当鼠标放在各个框上时，总金额会发生变化

 var app = angular.module("billModule", []);
        app.controller("billController", function ($scope) {
            $scope.total = 0.0;
        });
        app.directive("menu", function ($document) {
            return {
                restrict: "EA",
                replace: true,
                link: function (scope, element, attr) {
                    element.on("mousedown", function () {
                        scope.total += Number(attr.cost);
                      //console.log("total is "+ scope.total);
                    });
                },
                template: function (element, attr) {

                    return "<div class='box' title='$" + attr.cost + "'>" + attr.item + "</div>";
                }
            }
        })

.box {
            width: 132px;height: 38px;background-color: red;cursor: pointer;border: groove;text-align: center;padding-top: 5px;font-size: 33px;color: white;
        }
            .box:hover {
                /*background-color: blue;*/
                border: inset;
            }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="billModule">
        <div ng-controller="billController">
            <menu item="Gold" cost="20"></menu>
            <menu item="fruits" cost="40"></menu>
            <menu item="phone" cost="90"></menu>
            <menu item="water" cost="50"></menu>
            <menu item="monitor" cost="70"></menu>
            <div>{{total | currency : '$':2}}</div>
        </div>

    </div>

Answer 1

Angular 不知道更改，因为它是使用外部事件处理程序而不是 Angular 事件处理程序(例如 ngClick)进行的。要使 Angular 意识到更改，请用 scope.$apply 包装它:

scope.$apply(function() {
    scope.total += Number(attr.cost);
});

如果您使用的是 Angular 1.3 或更高版本，请使用 scope.$applyAsync，因为它的性能更高一些。