[英]How to manipulate controller's scope from directive in angular 1.4.5+
How can i overwrite the myCtrl's variable from directive? 如何覆盖指令中的myCtrl变量? and after, the controller must update the results... 之后,控制器必须更新结果...
I heard about bindToController, but I could not get it to work. 我听说过bindToController,但无法正常工作。
Used ng version 1.4.5 使用的ng版本1.4.5
HTML: 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: JS:
//The question is, how can i overwrite the myCtrl's variable from directive?
//and after, the controller must update the results...
//I heard about bindToController, but I could not get it to 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']);
});
},
};
}]);
You don't need to think of bindToController
that gets used when controllerAs
syntax is used in directive. 您无需考虑在指令中使用controllerAs
语法时会使用的bindToController
。
I think you should pass value
of ng-repeat
instead of passing its key field
like my-toggle="value"
我认为您应该传递ng-repeat
value
,而不是传递其键field
如my-toggle="value"
As you are going to update a scope variable from mousedown
event, which wouldn't update value of scope variable. 当您要通过mousedown
事件更新作用域变量时,该事件不会更新作用域变量的值。 Events are considered as out of angular context, thus angular doesn't run digest cycle for such case. 事件被认为是脱离角度的上下文,因此在这种情况下角度不会运行摘要循环。 You could run that digest cycle by doing scope.$apply()
. 您可以通过执行scope.$apply()
运行该摘要循环。 Better would be $timeout
which will avoid the digest
cycle conflict. 最好使用$timeout
来避免digest
循环冲突。
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']);
});
});
},
};
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.