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

Change Controller variable value from change in isolate scope directive

本文关键字：控制器 变量值 隔离 范围 指令      更新时间：2023-09-26

所以我知道通过双向绑定，=，在指令中，控制器的值可以传递到指令中。但是如何将隔离指令中的更改传递回控制器呢？

例如，我有一个表单，该窗体具有一个滑块，该滑块是使用具有隔离范围的指令构建的。初始值从控制器设置，然后在具有隔离范围的指令中更改。

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

有什么建议吗？

您有两种可能的方法来实现此目的。一种是在控制器中对传递给指令隔离作用域的变量创建监视语句。

// 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表达式。doStuff中的值由新的滑块值填充。我们传递给onChange的对象实际上是计算表达式的作用域，doStuff可以是控制器中的任何方法。

主要好处是，您具有在指令中通知某人的逻辑，而不是通过监视在控制器中隐式通知某人。

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

如果你已经将任何变量传递给隔离的作用域，你可以在两边绑定它（在其上设置任何侦听器）。您可以使用 Angularjs 事件发送任何信号，如果变量已更改。

也许这篇文章可以帮助你。

http://www.w3docs.com/snippets/angularjs/bind-variable-inside-angularjs-directive-isolated-scope.html

http://www.w3docs.com/snippets/angularjs/change-variable-from-outside-of-directive.html

相关文章：