时间戳

首页 > 解决方案 > 将 getterSetter 传递给指令

angularjs - 将 getterSetter 传递给指令

问题描述

我正在使用 AngularJS，我想将表单字段提取到指令中。该字段使用 GetterSetter 作为 ngmodel；当用户输入内容时修改主控制器中的实际字段的函数，或者只是返回值。它工作正常，在输入上使用这些属性：

ng-model="vm.formfields.MyGetterSetter"
ng-model-options="{ getterSetter: true }"

MyGetterSetter 是：

MyGetterSetter: bar(),

但要提取它，我想使用主控制器的 MyGetterSetter，而不必将函数移动到指令控制器。这是因为主控制器中有一些常见的行为，我想将 GetterSetter 保留在那里所以我想将此 MyGetterSetter 作为参数传递：

<my-directive foo="vm.formfields.MyGetterSetter"></m-directive>

和

function MyDirective() {
    return {
        templateUrl: '...',
        controller: 'MyDirectiveController',
        controllerAs: 'vmDirective',
        bindToController: true,
        scope: {
            foo: '='
        },
        require: ['^form'],

        link: function(scope, element, attrs, ctrls) {
            scope.form = ctrls[0];
        }
    };
}

在我的指令html中：

<select type="text"
        class="form-control"
        id="myId"
        name="myName"
        ng-model="vmDirective.foo"
        ng-required="true">
    <option value=""></option>
    ...
</select>

=> 我的问题是与 gettersetter 的绑定不起作用；当我在该字段中输入一个值时，我看到它不是一个函数，而是将 foo 视为一个变量并将值分配给它。如果我对 foo 使用“&”而不是“=”，它会传递一个函数类型，但它不会调用主控制器的 gettersetter。我还尝试使用 ng-change，或使用括号传递 foo，诸如此类的东西，但不知道为什么它没有按预期工作。

任何想法？:)

标签： angularjsangularjs-directive

解决方案

一种方法是ng-model在指令上使用：

<my-directive ng-model="vm.formfields.MyGetterSetter"
              ng-model-options="{ getterSetter: true }">
</my-directive>

function MyDirective() {
    return {
        templateUrl: '...',
        controller: 'MyDirectiveController',
        controllerAs: 'vmDirective',
        bindToController: true,
        scope: {
        },
        require: ["^form","ngModel"],

        link: function(scope, element, attrs, [form, ngModel]) {
            scope.form = form;
            ngModel.$render = function() {
                scope.vmDirective.foo = ngModel.$viewValue;
            };
            scope.vmDirective.fooChange = function(value) {
                ngModel.$setViewValue(value);
            };
        }
    };
}

模板

<select type="text"
        class="form-control"
        id="myId"
        name="myName"
        ng-model="vmDirective.foo"
        ng-change="vmDirective.fooChange(vmDirective.foo)"
        ng-required="true">
    <option value=""></option>
    ...
</select>

有关详细信息，请参阅

推荐阅读