directivas - ng-href angularjs

¿Cómo enlazar con ng-model dentro de una directiva que no tiene alcance?

Question

Quiero crear una directiva que envuelva un elemento de formulario (entrada, área de texto, seleccionar, etc.) y se una a ng-model.

Aquí está el uso:

<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>

Y esta es mi directiva:

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;
            }
        };
    });

Sin embargo, no funciona. Estoy atascado en el enlace ng-modelo. Sé que puedo cambiar a un ámbito secundario por alcance: {}, y las cosas funcionarían. Pero necesito alcance: falso.

Aquí hay una buena muestra de cómo hacerlo. Pero no puedo encontrar una muestra con el alcance: falso.

Enlace dinámico de ng-model dentro de una directiva

Answer 1

Estás muy cerca de tu solución deseada. El cuarto parámetro de la función de link es un ngModelController que es diferente de ngModel . Tu problema es que lo estás usando como un plan ngModel . Todo lo que necesitas hacer es solo un par de pequeños cambios.

En primer lugar, debe vincular el ngModelController a su scope . Luego, en lugar de ng-model="ngModel" , enlaza el $viewValue , así: ng-model="ngModel.$viewValue" . Finalmente, necesita crear un reloj para permitir que su directiva, field , cambie el valor de ngModel , de lo contrario será unidireccional.

Aquí está el código de trabajo:

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>

Answer 2

Siempre puedes usar atributos en tu directiva angular