如何从 angular 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 而不是像 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

如何从 angular 1.4.5+ 中的指令操作控制器的范围

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

javascript

angularjs

angularjs-directive

ng-repeat

angularjs-scope