指令不绑定到链接函数中设置的属性/作用域

Question

我遇到某种问题绑定（或可能只是更新）我在我的指令链接功能中设置的值

Here is an example Plunker

我的指令HTML设置如下：

<div id="display-area">
    <span>CHECK : {{showHighlight}}</span>
    <div id="highlight" ng-show="showHighlight"></div>
</div>

它的JS就像这样：

.directive("displayArea", function(){
  return {
        restrict : "E",
        replace : true,
        templateUrl : "DisplayArea.html",
        link : function(scope, el, attr){
            scope.showHighlight = false;

            el.bind("mousedown", function(e){
                scope.showHighlight = true;
            });

            el.bind("mouseup", function(e){
                scope.showHighlight = false;
            });
       }
    }
});

我的问题是，为什么绑定和HTML中的ng-show最初会获取showHighlight的值，但是当鼠标事件触发时却不会更新？ 如果您在JS的第11行更改了scope.showHighlight的初始值，那么显示会更新，但之后再点击则不会。

当谈到Angular时，我还处于睁大眼睛的模式，所以如果我愚蠢的话，请打我，给我一个朝正确方向推的方式：）

谢谢大家。我很感激帮助

Answer 1

事件处理程序位于Angular世界之外，因此它不知道范围值已更改。更新范围变量后需要调用scope.$apply();。

el.bind("mousedown", function (e) {
    scope.showHighlight = true;
    scope.$apply();
 });

 el.bind("mouseup", function (e) {
    scope.showHighlight = false;
    scope.$apply();
 });