Question

我想创建一个包装表单元素（input，textarea，select等）并绑定到ng-model的指令。

以下是用法：

<div ng-controller="formController">
    <field 
           type="text" 
           ng-model="model.CellPhoneNumber" 
           label="Cell phone" 
           mini-help="Sample: 123412341234" 
           required="please give us your number" 
           numeric 
           cellPhone="cell phone number is invalid" />
    <div>{{ model.CellPhoneNumber }}</div>
</div>
<script>
    app.cp.register('formController', ['$scope', function ($scope) {

    }]);
</script>

这是我的指示：

app.directive('field', function () {
        return {
            restrict: 'E',
            replace: 'true',
            scope: false,
            require: 'ngModel',
            template: '<div class="field">' +
                            '<label ng-if="label">{{ label }}</label>' +
                            '<input type="text" ng-if="type == \'text\'" required ng-model="ngModel" />' +
                            '<span class="mini help" ng-if="miniHelp">{{ miniHelp }}</span>' +
                            '<span class="messages">' +
                                '<span class="error message" ng-message="required" ng-if="requried">{{ required }}</span>' +
                            '</span>' +
                      '</div>',
            link: function (scope, element, attributes, ngModel) {
                scope.label = attributes.label;
                scope.miniHelp = attributes.miniHelp;
                scope.type = attributes.type;
                scope.required = attributes.required;
            }
        };
    });

但是，它不起作用。我坚持使用绑定ng-model。我知道我可以通过范围切换到子范围：{}，事情会起作用。但我需要范围：假。

以下是如何做到这一点的好例子。但我无法找到范围为的样本：false。

Dynamic ng-model binding inside a directive

Answer 1

您非常接近您想要的解决方案。 link函数的第四个参数是ngModelController，它与ngModel不同。您的问题是您将其用作计划ngModel。所有你需要做的只是一些小改动。

首先，您需要将ngModelController绑定到scope。然后，您绑定ng-model="ngModel"，而不是$viewValue，而不是ng-model="ngModel.$viewValue"。field。最后，您需要创建一个监视，以便允许您的指令ngModel更改angular .module('myApp', []) .directive('field', function() { return { restrict: 'E', replace: 'true', scope: false, require: 'ngModel', template: '<div class="field">' + '<label ng-if="label">{{ label }}</label>' + '<input type="text" ng-if="type == \'text\'" required ng-model="ngModel.$viewValue" />' + '<span class="mini help" ng-if="miniHelp">{{ miniHelp }}</span>' + '<span class="messages">' + '<span class="error message" ng-message="required" ng-if="requried">{{ required }}</span>' + '</span>' + '</div>', link: function(scope, element, attributes, ngModel) { scope.label = attributes.label; scope.miniHelp = attributes.miniHelp; scope.type = attributes.type; scope.required = attributes.required; scope.ngModel = ngModel; scope.$watch(function() { return ngModel.$viewValue; }, function(newValue) { ngModel.$setViewValue(newValue); ngModel.$render(); }); } }; });的值，否则它将是一个方向。

这是工作代码：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="myApp" ng-init="myModel = 'qwe'">
  <field type="text" ng-model="myModel" label="Cell phone" mini-help="Sample: 123412341234" required="please give us your number" numeric cellPhone="cell phone number is invalid"></field>

  <input type="text" ng-model="myModel">
  <p>{{ myModel }}</p>
</div>

boolean

Answer 2

您始终可以在angular指令

中使用属性

如何在没有作用域的指令中绑定到ng-model？

2 个答案: