Question

我试图将一些属性传递给我的<custom-input>指令。像这样......

<custom-input type="text" name="first_name" title="First Name"></custom-input>

但是，我在模板中将属性传递给ng-model的行收到语法错误。

我不确定我做错了什么？在我尝试进入自定义指令之前，一切正常。

指令

.directive('customInput', function() {
        return {
            restrict: 'E',
            scope: {
                type: '@type',
                name: '@name',
                title: '@title'
            },
            templateUrl: './assets/templates/custom-input.html',
            controller: function() {
                this.data = {}
                this.focus = null;
            },
            controllerAs: 'input'
        };
    })

模板

<div class="Form__field">
    <input
        ng-model="input.data.{{name}}"
        ng-class="{'Form__input--is-filled': input.data.{{name}}.length > 0}"
        ng-focus="input.focus='{{name}}'"
        ng-blur="input.focus=null"
        class="Form__input"
        type="{{type}}"
        name="{{name}}"
        placeholder="{{title}}"
    />
    <label
        ng-show="input.data.{{name}}.length > 0"
        ng-class="{'Form__label--is-active': input.focus === '{{name}}'}"
        class="Form__label"
        for="{{name}}"
    >{{title}}</label>
    <div
        class="Info Info--default"
        ng-show="input.focus === '{{name}}'">
    </div>
</div>

错误

错误：[$ parse：syntax]语法错误：令牌＆＃39; {＆＃39;不是有效的表达式[input.data。{{name}}]第12列的标识符从[{{name}}]开始。

Answer 1

在：

input.data.{{name}}

后：

input.data[name]

Answer 2

您的内部范围是直接附加类型，名称和标题。通过在指令定义中定义范围，您将声明隔离范围 - 一个不再具有外部范围访问权限的范围。您还没有传入输入对象。

你所拥有的与在控制器内执行此操作相同：

scope.name =＆＃39; first_name＆＃39 ;; scope.title =＆＃39;名字＆＃39 ;; scope.type =＆＃39; text＆＃39;;

如果您按照@ bchemy的建议，您将在名为first_name的空input.data对象上获得一个新属性。然后输入的内容将进入那个。但是没有理由期待任何事情会进入它，因为你没有通过任何事情，因为你已经投入了这个变量。

将自定义指令属性传递给模板中的ng-model

2 个答案: