ng-include lose data angularjs

Question

I'm new in angularjs and i have a problem trying to use ng-include inside a form.

HTML form:

<form method="post" id="formQuestion" name="formQuestion" ng-submit="sendForm()" novalidate ng-controller="questionValidation">
<ul>

    <div class="slide-animate" ng-include="'/templates/default/partials/_fields/f1.html'"></div>
    <div class="slide-animate" ng-include="'/templates/default/partials/_fields/f2.html'"></div>

f1 view partial

<li class="text-center">

<div>{{data | json}}</div>

Controller questionForm (parent)

.controller('questionForm', function($scope, $routeParams) {
    $scope.data = {};
    $scope.data.productTypeUrl = $routeParams.stringUrl;
    ...

Controller questionValidation (child)

.controller('questionValidation', ['$scope', '$http', function ($scope, $http) {
    alert($scope.$parent.data.productTypeUrl);
    $scope.isSubmit = false;
    ...

The alert into controller shows the correct value, but when i try to show this value into de view f1.html, the value doesn't show.

What i'm missing?

Thank u in advance.

Answer 1

I think that problem is that you are generating invalid html, you put div inside ul. So probably before angular starts, your browser fixing invalid html. It's similliar problem to own directive inside table, there are some solutions, first one, replace your ul and li tags with div or your div change to li another one, use a directive to replace those elements.

First try to replace this :

<form method="post" id="formQuestion" name="formQuestion" ng-submit="sendForm()" novalidate ng-controller="questionValidation">
<ul>

    <div class="slide-animate" ng-include="'/templates/default/partials/_fields/f1.html'"></div>
    <div class="slide-animate" ng-include="'/templates/default/partials/_fields/f2.html'"></div>

with this:

<form method="post" id="formQuestion" name="formQuestion" ng-submit="sendForm()" novalidate ng-controller="questionValidation">
<ul>

    <li class="text-center slide-animate" ng-include="'/templates/default/partials/_fields/f1.html'"></li>
    <li class="text-center slide-animate" ng-include="'/templates/default/partials/_fields/f2.html'"></li>

and f1 view:

<div>{{data | json}}</div>