从指令传递变量给控制器

15 浏览
0 Comments

从指令传递变量给控制器

我在弄清楚如何从点击事件中更新一个值方面遇到了困难。我有一个自定义指令，基本上是一个按钮开关。当按钮关闭时，我希望它将某个变量的值更改为0。当它打开时，我希望它将该变量的值更改为大于0的数字。

我创建了一个plnkr来重现这个问题。

此外，我读了这篇帖子，对我有一些帮助，但是我仍然对如何解决我的问题感到困惑。

在指令中，我处理了点击事件，然后尝试更改变量的值，但是在视图中它从未被更改。我认为我必须将值从指令传递到控制器，以便将其传播到视图，但是我不确定该如何做。

在指令中，我处理了点击事件，然后尝试更改变量的值，但是在视图中它从未被更改。我认为我必须将值从指令传递到控制器，以便将其传播到视图，但是我不确定该如何做。

0

1 答案

0 Comments

在这段内容中，问题的出现是因为指令引入了隔离作用域，所以指令作用域的something与控制器作用域的something是不同的。只有在scope : {...}中声明的变量才会被绑定。

为了解决这个问题，需要重新处理这些指令：

1. 可以在模板中使用ng-click - 这样就不需要使用不必要的digest调用。

2. on == !off - 所以使用一个变量而不是两个。

3. $scope ={} << 这是为了什么。

所以新的模板如下：

指令如下：

function buttonToggle() {
  function link(scope, elm) {
    scope.toggle = function() {
        var confirmResponse = (window.confirm("Are you sure?") === true);
        if( confirmResponse ) {
          scope.on = !scope.on;
          scope.output = scope.output + 'Changed to ' + scope.on + '. ';
        }
    }
  }
  var directive = {
    restrict: 'AE',
    link: link,
    replace: true,
    templateUrl: 'buttonToggle.html',
    scope: {
      on: "=",
      output: '='
    }
  };
  return directive;
}

工作中的plunk示例：http://plnkr.co/edit/qK8TMmjoxQ7rgKraryKp?p=preview

编辑:

这是来自OP的修复的plnk。

0