如何从角度1.4.5+中的指令操纵控制器的范围

Question

如何覆盖指令中的myCtrl变量？ 之后，控制器必须更新结果...

我听说过bindToController，但无法正常工作。

使用的ng版本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 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']);
        });
    },
  };
}]);

JSFIDDLE-插图

Answer 1

您无需考虑在指令中使用controllerAs语法时会使用的bindToController 。

我认为您应该传递ng-repeat value ，而不是传递其键field如my-toggle="value"

当您要通过mousedown事件更新作用域变量时，该事件不会更新作用域变量的值。 事件被认为是脱离角度的上下文，因此在这种情况下角度不会运行摘要循环。 您可以通过执行scope.$apply()运行该摘要循环。 最好使用$timeout来避免digest循环冲突。

标记

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

指示

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']);
          });
        });
    },
  };
}]);

演示小提琴