Question

我正在尝试获取自定义输入文本。这是我的观点

<div>
    <span>{{label}}</span>
    <input type="text" class="{{class}}" placeholder="{{placeholder}}" ng-style="width?{width: width + 'px'}:{}" ng-model="model"/>
</div>

这是我的控制器

    angular.module('inputText', [])
        .directive('inputText', function() {
            return {
                restrict: 'E',
                replace: true,
                scope: {
                    width: '@',
                    label: '@',
                    class: '@',
                    placeholder: '@',
                    model: '@'
                },
                controller: 'InputCtrl',
                templateUrl: 'inputText.html'
            };
        })
        .controller('InputCtrl', ['$scope', function($scope) {

        }]);

问题是我总是得到以下错误消息：

Error: [$parse:syntax] Syntax Error: Token 'model' is unexpected, expecting [:] at column 3 of the expression [{{model}}] starting at [model}}].

我的问题是：我如何通过引用传递模型，以获得类似的结果：

<input-text label="When?" class="" placeholder="" icon="awesome-icon" width="150" model="{{when}}"></input-text>

Answer 1

将模型定义为scope: { model: "=" }（=表示双向绑定）并使用：

<input ... ng-model="model" />

在模板中。

请记住不要使用第一级属性：I.e。做这样的事情：

<input-text ... model="form.when"></input-text>

不这个：

<input-text ... model="when"></input-text>

在所有情况下{{when}}都是错误的，它不会是双向约束的。

如何通过引用传递ng-model？

1 个答案: