Как динамически изменить шаблон поповера в angular-strap

Question

Как динамически изменить шаблон поповера в angular-strap

0

Я использую angularstrap для создания popover с использованием шаблона. Я использую атрибут ng-attr-data-template для предоставления ссылки на шаблон. Я изменяю указанное значение атрибута, используя функцию, которая вызывается нажатием кнопки. Но это изменение не отражается на popover. Пожалуйста, предложите возможное решение этой проблемы.

Вот ссылка на Plunkr Code следующим образом

index.html

    <!DOCTYPE html>
<html ng-app="klk">
<head>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
  <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.0.4"></script>
  <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.0.4"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>
<body ng-controller="mainCtrl">
  <hr/>
  <button type="button" class="btn btn-info"  placement="right" data-animation="am-flip-x" 
  ng-attr-data-template="{{link}}"  data-auto-close="1" bs-popover >
                        {{link}}
    </button>
    <hr/>
  <button class="btn btn-info" ng-click = "changeContent()">Change link</button>
</body>
</html>

app.js

var app = angular.module('klk', ['mgcrea.ngStrap']);
app.controller('mainCtrl', function($scope, $popover){
 $scope.trackName = 'Click on the button and give us a name';
 $scope.popov = function(el){
     $popover(angular.element(el),
        {
            show: true,
            placement: 'right',
            template: 'link1.html',
            animation: 'am-flip-x'
        });
 };
$scope.link = "link1.html";
$scope.change = true;
  $scope.changeContent = function(){
    $scope.change = !$scope.change;
    if ($scope.change)
      $scope.link = "link1.html";
    else
      $scope.link = "link2.html";
}
});

link1.html

<div class="popover">
  <div class="arrow"></div>
  <h3 class="popover-title"><strong>Heading 1</strong></h3>
  <div class="popover-content">

    pop content 1

  </div>
</div>

link2.html

<div class="popover" >
    <div class="arrow"></div>
    <h3 class="popover-title"><strong>Heading 2</strong></h3>
    <div class="popover-content">
       pop content 2
    </div>
</div>

Arshdeep Singh 02 июль 2015, в 11:43

Источник

Теги:

angularjs

popover

angular-strap

1 ответ

Ещё вопросы

samsur · Answer 1 · 2015-10-20T19-37-00.000Z

Если вы заинтересованы в динамическом изменении содержимого шаблона, его можно выполнить, используя следующий способ. Вот пример модифицированного Index.html. Обратите внимание, что есть содержимое данных и заголовок данных, которые привязаны к свойствам модели.

<!DOCTYPE html>
<html ng-app="klk">

<head>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
  <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.0.4"></script>
  <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.0.4"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body ng-controller="mainCtrl">
 <hr/>

<button type="button" class="btn btn-info"  placement="right" data-animation="am-flip-x"   data-title = "{{popover.title}}" data-content="{{popover.content}}" data-template="link3.html"  data-auto-close="1" bs-popover >Click Me</button>
<hr/>
<button class="btn btn-info" ng-click = "changeContent()">Change   link</button>
</body>
</html>

Вот модуль и контроллер. В этом контроллере у нас есть модель под названием popover с названием и контентом свойств, это будет динамично. Например, если вы вызвали функцию changeContent, он переключит содержимое и изменит содержимое в popover. // Код идет здесь var app = angular.module('klk', ['mgcrea.ngStrap']);

app.controller('mainCtrl', function($scope, $popover){
$scope.trackName = 'Click on the button and give us a name';
$scope.toggleContent=true;
$scope.popover = {
    "title": "Original Content",
    "content": "loading...",
};

$scope.changeContent=function(){
if($scope.toggleContent){
     $scope.popover = {
       "title": "Changed",
       "content": "<p>hello the content has changed!</p>",
      };

}else{
// show original content
 $scope.popover = {
    "title": "Original Content",
    "content": "Hello Content 1...",
   };
  }
 }

});

Вот шаблон, в котором будет содержаться контент и заголовок, который будет динамическим, поскольку он привязан к типу свойств и содержимому свойств. Найдите ng-bind-html

<div class="popover" tabindex="-1" ng-show="content">
<div class="arrow"></div>
<div class="popover-title" ng-bind-html="title"></div>
<div class="popover-content">
    <form name="popoverForm">
        <div class="form-actions">
            <!--<button class="btn-sm  pull-right close-popover" ng-click="$hide()">x</button>-->
        </div>
        <p ng-bind-html="content" style="min-width:300px;"></p>
    </form>
</div>
</div>

Рабочий пример этого можно найти здесь http://plnkr.co/edit/FpqwcdcPNVI3zIzK6Ut1?p=preview