1

I have this input field in a form in my AngularJS app:

<input type="text" data-ng-model="githubRepoUrl" id="githubRepoUrl" class="form-control" placeholder=" popover="Popover text here." popover-placement="top" popover-trigger="focus" required>

The popover works like charm, but when submiting the form, I can't access the githubRepoUrl property, declared as the data-ng-model of the field. AngularJS is simply not binding it. However, if I remove just popover="Popover text here." the binding will work and I can access the value of the attrivute in the controller. I can leave the rest of the popover related attributes and the binding will work.

Notice that I'm using angular-ui-bootstrap, and that I do not declare the githubRepoUrl property in the Angular controller. Nevertheless, the rest of the properties in the form can be accessed OK without declaring them in the controller, as they are by default added to the scope.

Any thoughs on what can be happening here? Thanks to all for any help.

Reydel Leon
  • 1,035
  • 2
  • 11
  • 34
  • always use a `dot` in ng-model so you bind to an object property not a primitve – charlietfl Aug 02 '14 at 22:22
  • Hi Charlie. Thanks for your comment. Could you elaborate a bit on your solution? When you say 'use a dot', are you referring to something like: `data-ng-model=".githubRepoUrl"`? – Reydel Leon Aug 03 '14 at 00:02
  • @charlietfl, I found a wiki page in the AngularJS GitHub repo, that gives more detail on what you mentioned. Thanks for pointing in the right direction. If you could write an answer and add a bit of detail, I would select it as correct, and the community would benefit from it. – Reydel Leon Aug 03 '14 at 00:21

1 Answers1

3

My guess is that the popover directive you're using has an isolated scope, so your model is being declared only inside the directive. Prefixing the ng-model name with $parent will declare the model in the parent of the directive. Example below:

<input type="text" data-ng-model="$parent.githubRepoUrl" id="githubRepoUrl" class="form-control" placeholder=" popover="Popover text here." popover-placement="top" popover-trigger="focus" required>
Eduardo Lelis
  • 395
  • 2
  • 9
  • While I used a different approach: assigning the property to an object as in `project.githubRepoUrl`, your solution also works. That been said, I'm selecting your answer as correct, as it addresses and resolves the original issue. – Reydel Leon Aug 03 '14 at 02:57
  • @reydelleon you should post what you did as an answer. It completely addresses the issue and is far better than using `$parent` – charlietfl Aug 03 '14 at 10:45
  • 1
    @charlietfl, i believe that while I can consider the approach I took better, it is fair to accept Dudu's answer as correct, since it solves the original question. Anyway, here is the link to the resource I used to come up with the better (and recommended by AngularJS team) approach: https://github.com/angular/angular.js/wiki/Understanding-Scopes – Reydel Leon Aug 04 '14 at 04:33