{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 贪生不怕死 的问题《AngularStrap. 2-way binding in popover》','https://www.manongdao.com/q-942208.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
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:
And your bindings to
user.name. Here's an updated Plunker: http://plnkr.co/edit/ZEvXi9wFF8FVh0WFxn3l?p=preview