Question

Hola yo de nuevo, ahora lo que no logro hacer es que mi directiva, que genera un elemento html (de formulario) cambie dinamicamente el ng-model de mi controlador.

angular.module('Prueba', [])
.controller('ComentarioController', comentarioMethod);
.directive('comentarios', function(){
    return {
         restrict: 'E',
         templateUrl: 'comentarios.html', //<input type='text'>
         controller: ComentarioController,
         link: function(scope, element, attrs, controller){
              var htmlformulario = '' +
                '<textarea class="form-control" ng-model="controller.comentarioTexto">' +
                    '<br> ' +
                    '<button id="algo" class="btn btn-primary pull-right">Enviar Comentario</button>';

                $(input).on('focus', function(){
                    parent.html(htmlformulario);
                });

                $element.on('click', 'button', function(){
                    console.info(controller.comentarioTexto); //sigue generando hola :(
                });
    };
});

function comentarioMethod($http, $scope){
    self.comentarioTexto = 'hola';
}

Answer 1

Hola @elporfirio, vamos a ver, necesitas incluir en tu directiva la opcion controllerAs para poder usar ng-model="controller.comentarioTexto" y unas cosillas más.

tu directiva debe:

• tener controllerAs definido ( en el caso de que uses la sintaxis controller as )
• usar $compile para contenido html dinámico

---

preparemos la inyeccion de las dependencias:

.directive('comentarios', function($compile) {
    ...
}

NOTA: Ten cuidado con esta inyección de dependencias, en una minificación si no usas ng-annotate corres el riesgo de que "$compile" sea reemplazado por alguna variable cualquiera, causando que angular no encuentre esa dependencia.

Soluciones a la nota anterior:

usar la sintaxis con un arreglo, dependencias - funcion:

/* GOOD and nice :) */
.directive('comentarios', ['$compile', function($compile)

agregar la funcion después:

/* VERY GOOD and professional :3 */

.directive('comentarios', comentariosDirective);

comentariosDirective.$inject = ['$compile'];

function comentariosDirective () {
    var directive = {
        restrict: 'E',
        controller: 'some',
        link: link,
    }

    return directive;

    function link (scope, element, attrs, controller) {}
}

pero ahora regresando al problema:

tienes angular! lo que significa que tienes jquery ahi! y por tú código parece ser que usas la librería jquery completa, entonces saquemos provecho a esos 30kb:

(function() {
    'use strict';

    angular
        .module('app')
        .directive('comentarios', comentariosDirective);

    comentariosDirective.$inject = ['$compile'];

    function comentariosDirective($compile) {
        var directive = {
            restrict: 'E',
            templateUrl: 'comentarios.html',
            scope: {},
            controller: 'ComentarioController',
            controllerAs: 'controller',
            bindToController: true,
            link: link
        };
        return directive;

        ////////////////////////////

        function link(scope, element, attrs, controller) {
            var form, button, textarea;

            form = angular.element('<div >');

            textarea = angular
                .element('<textarea >')
                .addClass('form-control')
                .attr('ng-model', 'controller.comentarioTexto');

            button = angular
                .element('<button >')
                .attr('id', 'algo')
                .text('Enviar Comentario')
                .addClass('btn btn-primary pull-right');

            form.append(
                textarea,
                angular.element('<br >'),
                button
            );

            $compile(form)(scope);
            element.append(form);

            element.on('click', button, function () {
                // 'hola' text anymore, $compile, ctrlAs
                // to the rescue! 8)
                console.log(controller.comentarioTexto);
            });
        }
    }

})();

el truco está en $compile(form)(scope);

suponiendo que en tu código html tienes:

<div ng-controller="ComentarioController as ctrl">
    <comentarios></comentarios>
</div>

saludos!