从指令调用角度控制器函数

Call Angular controller function from directive

本文关键字：控制器 函数 指令 调用      更新时间：2023-09-26

我继承了一些 Angular 1.4 代码，它有一些奇怪的范围问题，我正在尝试整理 - 我被困在一个特定的问题上。

我有一个 ES6 类控制器（Babelified） - 在其中，我有这样的方法

save(data) {
    this.validate(data);
    .... do some more stuff
}

我还有一个视图，模型和html以及所有好东西。在其中，我有一个用于单选按钮的自定义指令 - 像这样

<radio onupdate="vm.save" data="model.myradio1" />

我的无线电指令似乎有两个绑定，用于更新和数据 

.directive('radio', () => {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'radio',
        scope: {
            data: '=',
            onupdate: '='
        }
    };
})

该模板包含

ng-click="radio.onupdate($parent.data);" <-- This looks suspect but no idea what it does!

然而 - 然后以我意想不到的方式爆炸：

this.validate is not a function

我可以看到这是怎么发生的 - this现在指的是单选按钮范围。但是我该如何解决呢？我对Angular很陌生。

为了从指令调用控制器方法，您需要创建一个具有&范围配置的"引用"函数：

.directive('radio', () => {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'radio',
        scope: {
            data: '=',
            onupdate: '&'
        }
    };
})

然后从指令模板中，您需要像这样调用它：

ng-click="onupdate({data: $parent.data});"

最后，无线电指令的用法变为：

<radio onupdate="vm.save(data)" data="model.myradio1" />

您好，我坚持您的问题标题"如何从指令调用控制器函数"。

我做了一个示例，该示例使用 <select> 元素并调用控制器函数$scope.filterHall()以在用户更改值时发送所选对象。

指令（我得到changeHall函数并将其调用到模板中，见下文）：

.directive('eventHallsList', function($timeout, $log, $http, $compile) {
    return {
      restrict: 'AE',
      replace: true,
      scope: {
        changeHall: '&',
        items: '=',
        model: '='
      },
      templateUrl: 'mytemplate.tpl.html',
      link: function(scope, element, attrs) {
      }
    }
  });

模板：每次用户选择一个值时，我都会调用绑定到控制器函数$scope.filterHall()的 changeHall() ，并传递对象。

<select style="color:#337ab7"
        ng-change="changeHall({value:model})" ng-model="model"
        ng-options="item as item.name for item in items">
    <option value=""> choose hall</option>
</select>

现场示例：http://plnkr.co/edit/iCS0blQjceA4tIIb8bUV?p=preview

希望有帮助，祝你好运。

当您

使用 HTML 元素 on*** 属性注册侦听器时，这是非常常见的问题。您必须将控制器上下文绑定到侦听器函数。

<radio onupdate="vm.save.bind(vm)" data="model.myradio1" />

我希望它能为你工作。

相关文章：