1

Good day,

I can successfully bind content into the popover body via template, but changes made inside this area are not bound back to the parent scope. Here is a quick example. Plunker

I would be grateful for any help

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <title>2-way binding popover</title>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="defaultCtrl" style="margin: 100px 100px">
    <button type="button" class="btn btn-lg btn-danger" data-unique="1" data-auto-close="1" data-placement="bottom" data-content-template="popover-tmpl.html" data-title="Title Two" data-html="true" bs-popover>
        Change name
    </button>
    {{ name }}
    <script type="text/ng-template" id="popover-tmpl.html">
        {{ name }}
        <input type="text" data-ng-model="name">
    </script>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.tpl.min.js"></script>

<script type="text/javascript">
    var app = angular.module("myApp", ['mgcrea.ngStrap']);
    app.controller("defaultCtrl", ["$scope", function($scope) {
        $scope.name = 'Roman';
    }]);
</script>
</body>
</html>
forza020
  • 131
  • 1
  • 4
  • 12
  • popover creates a child scope, **[so use dot rule](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs)** – PSL Jan 13 '15 at 15:15

1 Answers1

2

You're trying to bind a primitive. In angular that causes problems because of the childscope. Binding to an object however will work. Change your scope declaration to:

$scope.user = {
    name: 'Roman'
}

And your bindings to user.name. Here's an updated Plunker: http://plnkr.co/edit/ZEvXi9wFF8FVh0WFxn3l?p=preview

iH8
  • 27,722
  • 4
  • 67
  • 76
  • Thanks, however I've posted a simple example. I'm developing a more complex app, so please, take a look at [this example](http://plnkr.co/edit/ykmgQMypnJl8muIx9SzZ?p=preview). I have transclude directive with popover inside. – forza020 Jan 13 '15 at 19:32
  • That's quite out of context for this particular question and not what comments are meant for. I can't post a solution with code in here and others can't help or find the solution if they have the same problem. I'de recommend posting a new question with the updated code and example. – iH8 Jan 13 '15 at 20:13