文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在angular-strap中动态改变弹出模板

问如何在angular-strap中动态改变弹出模板
EN

Stack Overflow用户

提问于 2015-07-02 16:58:23

回答 1查看 2.6K关注 0票数 0

我正在使用angularstrap创建一个使用模板的弹出窗口。我使用属性ng-attr-data-template来提供到模板的链接。我正在使用一个在单击按钮时调用的函数来更改所提到的属性值。但这一变化并没有反映到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>

angularjs

popover

angular-strap

回答 1

Stack Overflow用户

发布于 2015-10-21 05:37:03

如果您有兴趣动态更改模板的内容，可以使用以下方法来实现。以下是修改后的Index.html的示例。请注意，有一个绑定到模型属性的data-content和data-title。

<!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的模型，它的属性是title和content，这将是动态的。例如，如果您调用函数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中找到

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31180014

复制

相似问题

问如何在angular-strap中动态改变弹出模板
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在angular-strap中动态改变弹出模板EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在angular-strap中动态改变弹出模板
EN