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

时间:2015-09-25 19:03:37

标签: javascript angularjs angularjs-directive angularjs-scope ng-repeat

如何从指令覆盖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 - 插图

1 个答案:

答案 0 :(得分:1)

在指令中使用bindToController语法时,您不需要考虑使用controllerAs

我认为你应该通过value的{​​{1}}而不是像[{1}}

那样传递其关键ng-repeat

当您要从field事件更新范围变量时,该事件不会更新范围变量的值。事件被认为是在角度上下文之外,因此对于这种情况,角度不会运行摘要周期。您可以通过my-toggle="value"运行该摘要周期。更好的是mousedown,这将避免scope.$apply()周期冲突。

<强>标记

$timeout

<强>指令

digest

Demo Fiddle