Question

我最近在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，您可以尝试一下。

Answer 1

你在第二次插话中提出了一个有趣的观点。我第一次没有抓住这个，但我认为这可能是因为你在脚本标签中进行了popover输入。如果您可以在内联脚本中执行此操作，我建议您使用自定义指令。这样就可以保持最新的角度消化周期。

示例指令：

["'name'", "'-Updated Date'"]

使用它：

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

这是working plunk。我希望这是你正在寻找的东西

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

1 个答案: