Контрольная переменная области доступа в Директиве угловая

Question

Я хочу получить доступ к переменной области total в свойствах директивы.

Несмотря на то, что итоговое значение обновляется при событии 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

Угловая не осведомлен об изменениях, так как это было сделано используя внешний обработчик событий, а не обработчик углового события (например, ngClick). Для того, чтобы Угловая знать об изменении, оберните его scope.$apply:

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

Если вы используете угловую 1.3 или выше, используйте scope.$applyAsync, так как это немного более производительным.

Answer 2

Использование 'scope. $ Digest();' после 'scope.total + = Number (attr.cost);' ваше общее количество будет обновляться в шаблоне. См ниже plnkr

http://plnkr.co/edit/nOPggwreTTEukYUMbD1X?p=preview

Код:

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); 
       scope.$digest(); 
       //console.log("total is "+ scope.total); 
      }); 
     }, 
     template: function (element, attr) { 

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