CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrapmean-stack
Reydel Leon
Reydel Leon

Reputation: 1075

Angular binding not working when using popover directive

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.

Upvotes: 1

Views: 2138

Answers (1)

Eduardo Lelis
Eduardo Lelis

Reputation: 405

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>

Upvotes: 3

Related Questions