从隔离范围指令中的更改更改控制器变量值

Question

所以我知道使用双向绑定,=在一个指令中,控制器的值可以传递给指令.但是,如何将隔离指令中的更改传递回控制器？

因此,例如,我有一个表单,其中有一个滑块,该滑块使用带有隔离范围的指令构建.初始值从控制器设置,然后使用隔离范围更改指令.

我正在尝试做的是当具有双向绑定的指令变量也发生变化时更改控制器的值.

有什么建议？

Answer 1

您有两种可能的方法来实现这一目标.一种是在控制器中为传递给指令隔离范围的变量创建一个watch语句.

// code in view controller
$scope.sliderValue = 0;
$scope.$watch('sliderValue', function(newValue) {
  if (angular.isDefined(newValue)) {
    // Do stuff with new slider value
  }
});

请注意,我们需要isDefined,因为每个监视都会在范围编译时触发,初始值未定义.

另一种方法是使用参数来增强指令,该参数在滑块值更改时进行评估(非常类似于回调函数).

// sample directive code
angular.module('my-ui-controles', []).directive('mySlider', [function() {
  return {
    template: '...',
    scope: {
      value: '=mySlider',
      onChange: '&'
    },
    link: function(scope, elem, attrs) {
      // assume this is called when the slider value changes
      scope.changeValue = function(newValue) {
        // do other internal stuff and notify the outside world
        scope.onChange({value: newValue});
      }
    }
  }
}])

现在你可以在模板中使用这个像这样:

<div my-slider="sliderValue" on-change="doStuff(value)"></div>

现在发生的事情是,一旦滑块值改变,我们就会计算onChange传递给指令的表达式.值in doStuff将填入新的滑块值.我们传递给的对象onChange实际上是用于计算表达式的范围,doStuff可以是控制器中的任何方法.

主要的好处是你有通过手表通知指令中某人的逻辑,而不是隐含在你的控制器中.

希望能让你朝着正确的方向前进.