0

I have a table that I'm including on different pages, this works great except I can't get to the values in the included table. If I use this on a page:

 <div data-ng-include="'/app/views/tasks/tasksTable.html'" />

the table shows up but I can't display the value in the file tasksTable.html, this shows undefinded:

        <td>
            <i class="icon-ok-sign" ng-click="addTask()"></i>
        </td>
        <td>
            <input ng-model="task" />
        </td>

From the controller:

    $scope.addTask = function (data) {
         console.log($scope.task);        
    };

If I put the table in my file instead of using ng-include to display the table I can display whatever I type into the input tied to ng-model="task".

tcrafton
  • 97
  • 2
  • 10

1 Answers1

1

The reason why you can't access the task is due to two reasons. Firstly, is because ng-include creates a new scope for the template that is a child of the parent controller scope. The second reason is that you are attaching your string model directly to the scope and not creating an object that contains your model. I created a working CodePen example to demonstrate how to solve your problem.

You should read up on prototypical inheritance and how it affects on scopes.

I hope this helps.

Community
  • 1
  • 1
Adam
  • 5,226
  • 4
  • 21
  • 18
  • 2
    While the answer appears correct, I think it can be boiled down to a shorter version: Don't use anything without a dot in it in a ng-model attribute. In your example you use "task". When the child scope is created, the scope is copied, so you have a independent copy of "task". In Adam's modified example he is using "task.value". Here "task" is a object, and a object is "copied" by reference, thus task is pointing to the same object in parent and child scope and thus task.value will access the same value. – Juliane Holzt Sep 27 '13 at 16:20
  • @kju Well said, however you missed mentioning the other critical factor in this solution. If you don't declare that object "outside" in the parent scope it will only be created in the child (ng-include scope) and will not be accessible to the parent scope. Otherwise, what you said is 100% correct. In summary, #1. Always use objects for your models and attach them to scopes. Don't treat scopes themselves as models and attach data directly to them. #2. Always declare models in the outermost scope where you need access to the model from. – Adam Sep 27 '13 at 16:28
  • Thanks for pointing that out. I indeed forgot about that (was bitten by this before) but of course it makes total sense. If there is nothing yet which could be "copied" by reference, the object will be created in the current scope. – Juliane Holzt Sep 27 '13 at 21:23
  • 1
    But still, the biggest thing to remember is to always use something which contains a dot in ng-model. This is something the AngularJS developers themselves say: If you don't have a dot in ng-model attribute, you are doing it wrong. It is unfortunate that a lot of the easier examples in AngularJS documentation and tutorial actually show the use without a dot. – Juliane Holzt Sep 27 '13 at 21:25