javascript - 如何从 Angular 1.4.5+ 中的指令操纵 Controller 的范围

Question

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

我听说过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 而不是像 my-toggle="value 那样传递其键 field “

当您要从 mousedown 事件更新作用域变量时，这不会更新作用域变量的值。事件被视为超出 Angular 上下文，因此 Angular 不会在这种情况下运行摘要循环。您可以通过执行 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']);
          });
        });
    },
  };
}]);

Demo Fiddle