CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Nicolas Z
Nicolas Z

Reputation: 55

angular uib-popover-template input two-way binding

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.

Upvotes: 0

Views: 2351

Answers (1)

big_water
big_water

Reputation: 3204

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

Upvotes: 1

Related Questions