javascript - How to manipulate controller's scope from directive in angular 1.4.5+ -

how can overwrite myctrl's variable directive? , after, controller must update results...

i heard bindtocontroller, not work.

used ng version 1.4.5

html:

<form method="post"> <div ng-app="myapp">     <div ng-controller="myctrl">         <div ng-repeat="(field, value) in box.fields">             <div class="my-toggle" my-toggle="field" ng-bind="value['par2']"></div>         </div>     </div </div> </form> 

js:

//the question is, how can overwrite myctrl's variable directive? //and after, controller must update results...  //i heard bindtocontroller, not work.  //used version 1.4.5  var myapp = angular.module('myapp', []);  myapp.controller('myctrl', function ($scope){     $scope.box = {         fields : {             fieldone:{                 par1 : 10,                 par2 : 12,             },             fieldtwo:{                 par1 : 20,                 par2 : 24,             },             fieldthree:{                 par1 : 30,                 par2 : 36,             }         }     }; });  myapp.directive('mytoggle', [function(){   return{     restrict: 'a',     scope: {         mytoggle : '=',       },     link : function(scope, element, attr){         var startx = 0, x = 0;         var elementleft = 0;          element.on('mousedown', function(event){             //ctrlscope.fields[scope.mytoggle]['par1'] + 1;             //console.log(ctrlscope.fields[scope.mytoggle]['par2']);         });     },   }; }]); 

jsfiddle - illustration

you don't need think of bindtocontroller gets used when controlleras syntax used in directive.

i think should pass value of ng-repeat instead of passing key field my-toggle="value"

as going update scope variable mousedown event, wouldn't update value of scope variable. events considered out of angular context, angular doesn't run digest cycle such case. run digest cycle doing scope.$apply(). better $timeout avoid digest cycle conflict.

markup

<div ng-repeat="(field, value) in box.fields">     <div class="my-toggle" my-toggle="value" ng-bind="value['par2']"></div> </div> 

directive

myapp.directive('mytoggle', [function(){   return{     restrict: 'a',     scope: {         mytoggle : '='     },     link : function(scope, element, attr){         var startx = 0, x = 0;         var elementleft = 0;          element.on('mousedown', function(event){           scope.$apply(function(){             scope.mytoggle['par1'] = scope.mytoggle['par1'] + 1;             scope.mytoggle['par2'] = scope.mytoggle['par2'] + 1;             console.log(scope.mytoggle['par2']);           });         });     },   }; }]); 

demo fiddle