Question

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

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

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

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

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

My Radio指令似乎有两个绑定onupdate＆amp;数据

.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很新。

Answer 1

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

.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" />

Answer 2

您好我坚持您的问题标题'如何从指令'调用控制器功能。

我做了一个使用$scope.filterHall()元素的示例，并在用户更改值时调用控制器函数.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) { } } });来发送所选对象。

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

changeHall()

模板： 每次用户选择一个值时，进入select元素，我调用绑定到控制器函数$scope.filterHall()的{{1}}，然后通过对象。

<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

希望有所帮助，祝你好运。

Answer 3

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

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

我希望它对你有用。

从指令调用Angular控制器函数

3 个答案: