ディレクティブのアクセススコープコントローラ変数

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）;の後に合計はテンプレートで更新されます。

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>"; 
     } 
    } 
});