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