angular uib-popover-template 输入双向绑定答案

【问题标题】：angular uib-popover-template input two-way bindingangular uib-popover-template 输入双向绑定
【发布时间】：2017-01-11 21:41:02
【问题描述】：

我最近在做uib-popover，发现了一个让我很困惑的问题。

我想弹出一个模板，在这个模板中我有一个输入，起初输入有初始值。

我想根据输入实时更新内容。当我只是绑定一个变量时，它不起作用，而如果我绑定一个对象，它就起作用了。我想不通这个问题。

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";
});

这里是plunker示例https://plnkr.co/edit/IPXb5tddEPQPPAUrjdYx?p=preview，你可以试试。

【问题讨论】：

我认为这是因为变量是由值绑定的，而对象是由javascript中的引用绑定的。只绑定到对象有什么问题？
你can't have 2-way binding with primitives
@big_water 我只是想弄清楚为什么它不能绑定到变量。
@RamblinRose 我几乎明白了你的意思，但我仍然可以将变量绑定到输入，请看这个 plunker plnkr.co/edit/9i41WS?p=preview，为什么在这个例子中我可以绑定一个变量而不是一个对象，它有效.

标签： angularjs angular-ui-bootstrap

【解决方案1】：

你在第二次大发雷霆中提出了一个有趣的观点。我第一次没有发现这一点，但我认为这可能是因为您在脚本标签中进行弹出框输入。如果可以的话，我建议使用自定义指令，而不是仅在内联脚本中执行。这样它就可以与 Angular 的摘要周期保持同步。

指令示例：

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
      });
    }
  };
}]);

并使用它：

<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>

这是working plunk。我希望这就是你要找的东西

【讨论】：