Как динамически менять шаблон popover в угловом ремешке

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

Вот ссылка на Plunkr Кодекса заключается в следующем

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>

источник

2015-07-02 Arshdeep Singh

Если вы заинтересованы в изменении содержания шаблона динамически, это может быть достигнуто с помощью следующим образом. Вот пример модифицированного 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>

Здесь модуль и контроллер, контроллер В этом мы имеем модель под названием поповер с названием свойств и содержания, это будет динамическим. Например, если вы вызвали функцию 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...", 
    }; 
    } 
} 

});

Вот шаблон, который будет иметь содержание и название, которое будет динамичным, как она привязана к модели свойств заголовка и содержимого. Посмотрите на нг-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

источник

2015-10-20 21:37:03 samsur

Как динамически менять шаблон popover в угловом ремешке

ответ

Смежные вопросы