Directive to create div, label and input

Question

Good morning, I created a directive to create a div, a label and an input, but the ng-model attribute is not working.

In the example, the dynamically created does not work which is the first, and the manually created which is the second works.

https://plnkr.co/edit/1mWr6a6rLpvMiqAJe4jy?p=preview

I’ve made several attempts and nothing.

Thanks in advance.

Answer 1

What is missing from your code is to compile html with a scope so that it knows who to bind models to.

Take a look at the Fork I made of yours plnkr.

But to make it clearer, take a look here:

Injects the $compile in your directive because it will be responsible for compiling the html that you wrote dynamically in your directive.

app.directive('divCadastro', ['$compile', function($compile) {...

And when it’s time to do the element.append() Compile your html by passing the scope of your controller:

element.append($compile(input)(scope.$parent));

Take a look at the documentation of $Compile when you can, but already in advance.

$compile({html a ser compilado})({escopo para fazer bind})

I’m calling the scope like this scope.$parent because you want to bind with the scope of the parent controller of the directive. If you pass only scope angular will try to bind with its own directive.

---

UPDATE

I saw your question about dynamic data not updating the $scope. Simply initialize the variable in the controller:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.propriedade = {};
  $scope.manipulaPropriedade = function(propriedade) {
    console.log(propriedade)         ;
  }
});

It is not good practice to create dynamic variables in $scope. Imagine someone who goes into maintenance trying to guess where this variable comes from later in some method.