angular uib-popover-template input two-way binding

Question

I am working on uib-popover recently, I found a problem that I am confused with.

I want to popover a template, in this template I have an input, at first the input have initial value.

I want to update the content real-time based on the input. When I just bind a variable, it does not work, while if I bind an object, it works. I can't figure this problem out.

index.html

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PopoverDemoCtrl">
  <hr/>
  <hr/>
  <hr/>
    <button uib-popover-template="'myPopoverTemplate.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
    &nbsp;
    {{dynamicPopover.title}}
    <script type="text/ng-template" id="myPopoverTemplate.html">
        <div class="form-group">
          <input type="text" ng-model="dynamicPopover.title" class="form-control">
        </div>
    </script>

    <button uib-popover-template="'inputContent.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
    &nbsp;
    {{inputContent}}
    <script type="text/ng-template" id="inputContent.html">
        <div class="form-group">
          <input type="text" ng-model="inputContent" class="form-control">
        </div>
    </script>
</div>
  </body>
</html>

example.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function($scope, $sce) {
  $scope.dynamicPopover = {
    title: 'Title'
  };
  $scope.inputContent = "hello";
});

Here is the plunker example https://plnkr.co/edit/IPXb5tddEPQPPAUrjdYx?p=preview, you could have a try.

I think this is because variables are bound by value and objects are bound by reference in javascript. What is the problem with just binding to the object? — big_water, Jan 11 '17 at 21:45
You [can't have 2-way binding with primitives](http://stackoverflow.com/questions/38078884/two-way-binding-on-primitive-variables-in-angularjs-directive) — RamblinRose, Jan 11 '17 at 21:47
@big_water I just want to figure out why it can't bind to a variable. — Nicolas Z, Jan 12 '17 at 20:12
@RamblinRose I almost got your point, but I still can bind a variable to input, please see this plunker https://plnkr.co/edit/9i41WS?p=preview, why in this example I can bind a variable instead of an object, it works. — Nicolas Z, Jan 12 '17 at 20:23

big_water · Answer 1 · 2017-01-12T22:03:21.970

You made an interesting point in your second plunk. I didn't catch this the first time but I think it may be because you are doing your popover input in a script tag. I would suggest using a custom directive if you could versus just doing it in an inline script. That way it is kept up to date with angular's digest cycle.

Example Directive:

customPopoverApp.directive('customPopover',['$compile','$templateCache',function($compile,$templateCache){
  return {
    restrict:'A',
    transclude:true,
    template:"<span>Click on me to show the popover</span>",
    link:function(scope,element,attr){
      var contentHtml = $templateCache.get("customPopover.html");
      contentHtml=$compile(contentHtml)(scope);
      $(element).popover({
        trigger:'click',
        html:true,
        content:contentHtml,
        placement:attr.popoverPlace
      });
    }
  };
}]);

And to use it:

<button custom-popover="" popover-place="bottom">click on me to show the popover</button>
{{message}}

 <script type="text/ng-template" id="customPopover.html">
  <div class="form-group">
    <input type="text" ng-model="message" class="form-control">
  </div>
</script>

Here is a working plunk. I hope this is what you're looking for

angular uib-popover-template input two-way binding

1 Answers1