AngularJS - Crea una directiva que usa ng-model
Estoy intentando crear una directiva que crearía un campo de entrada con el mismo modelo ng que el elemento que crea la directiva.
Esto es lo que se me ocurrió hasta ahora:
HTML
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
This scope value <input ng-model="name">
<my-directive ng-model="name"></my-directive>
</body>
</html>
JavaScript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Felipe";
});
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
scope: {
ngModel: '='
},
template: '<div class="some"><label for="{{id}}">{{label}}</label>' +
'<input id="{{id}}" ng-model="value"></div>',
replace: true,
require: 'ngModel',
link: function($scope, elem, attr, ctrl) {
$scope.label = attr.ngModel;
$scope.id = attr.ngModel;
console.debug(attr.ngModel);
console.debug($scope.$parent.$eval(attr.ngModel));
var textField = $('input', elem).
attr('ng-model', attr.ngModel).
val($scope.$parent.$eval(attr.ngModel));
$compile(textField)($scope.$parent);
}
};
});
Sin embargo, no estoy seguro de que esta sea la forma correcta de manejar este escenario, y hay un error que indica que mi control no se está inicializando con el valor del campo de destino del modelo ng.
Aquí hay un Plunker del código de arriba:http://plnkr.co/edit/IvrDbJ
¿Cuál es la forma correcta de manejar esto?
EDITAR: Después de quitar elng-model="value" De la plantilla, esto parece estar funcionando bien. Sin embargo, mantendré esta pregunta abierta porque quiero volver a verificar que esta es la forma correcta de hacerlo.