Question

我想要实现的是能够将角度模型绑定到自定义组件，如下所示：

<my-text model="myModel" field="myField" default-value="n/a"></my-text>

这应该为myModel的{{1}}字段创建一个编辑组件，其中myField为default-value。

我的组件的模板非常简单：

n/a

我的指令如下：

<input type="text" value="{{defaultValue}}" ng-model="model.field"/>

问题是(function(angular) { 'use strict'; angular.module('MyFormComponents').directive('myText', [function() { return { restrict : 'E', templateUrl : 'templates/myTextTemplate.html', scope : { model : '=', field : '@', defaultValue : '@' }, link : function($scope, $element, $attributes) { }, controller : function($scope) { } }; }]) })(angular);字段已生成，但其中没有input，如果我输入某些内容，则不会传播我输入到模型中的值。也没有错误消息。我究竟做错了什么？如果我这样做，那么Angular中实现目标的惯用方法是什么？

如果我试试这个：

default-value

我收到语法错误。

Answer 1

尝试这种方式：

<input type="text" value="{{defaultValue}}" ng-model="model[field]"/>

Answer 2

我在想这样的事情：

.directive('myText', [function() {
    return {
        require : 'ngModel',
        restrict : 'E',
        templateUrl : 'templates/myTextTemplate.html',
        link : function($scope, $element, $attributes, ngModelCtrl) {
                        if ($attributes.defaultValue) {
                            ngModelCtrl.$setViewValue($attributes.defaultValue); 
                            }
        },
        controller : function($scope) {
        }
    };
}])

然后：

<my-text ng-model="myModel.myField" default-value="n/a"></my-text>

ngModelCtrl文档位于：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

除非您要在视图中使用它们，否则您不需要将这些属性绑定到范围中。这也会产生不必要的绑定 - 后来可能会导致性能问题。

如何将我的自定义组件（指令）绑定到AngularJS中的任意模型？

2 个答案: