Question

我正在使用angularstrap来使用模板创建一个弹出窗口。我使用属性ng-attr-data-template来提供模板的链接。我正在使用一个在单击按钮时调用的函数来更改提到的属性值。但这种变化并没有反映给人们。请为此问题建议可能的解决方案。

以下是Plunkr的链接代码如下

的index.html

SELECT p.`id_product`, pl.`name`, p.`ean13`, p.`upc`, p.`active`, p.`reference`, m.`name` AS manufacturer_name, stock.`quantity`, product_shop.advanced_stock_management, p.`customizable` 
FROM `ps_product` p 
INNER JOIN ps_product_shop product_shop ON (product_shop.id_product = p.id_product AND product_shop.id_shop = 1) 
LEFT JOIN `ps_product_lang` `pl` ON p.`id_product` = pl.`id_product` AND pl.`id_lang` = 3 AND pl.id_shop = 1 
LEFT JOIN `ps_manufacturer` `m` ON m.`id_manufacturer` = p.`id_manufacturer` 
LEFT JOIN `ps_product_supplier` `sp` ON sp.`id_product` = p.`id_product` 
LEFT JOIN `ps_product_attribute` `pa` ON pa.`id_product` = p.`id_product` 
LEFT JOIN ps_product_attribute_shop product_attribute_shop ON (product_attribute_shop.id_product_attribute = pa.id_product_attribute AND product_attribute_shop.id_shop = 1) 
LEFT JOIN ps_stock_available stock ON (stock.id_product = p.id_product AND stock.id_product_attribute = IFNULL(`pa`.id_product_attribute, 0) AND stock.id_shop = 1 AND stock.id_shop_group = 0 ) 
WHERE (
    pl.`name` LIKE '%search_word%' 
    OR p.`ean13` LIKE '%search_word%' 
    OR p.`upc` LIKE '%search_word%' 
    OR p.`reference` LIKE '%search_word%' 
    OR p.`supplier_reference` LIKE '%search_word%' 
    OR `product_supplier_reference` LIKE '%search_word%' 
    OR pa.`reference` LIKE '%search_word%' 
    OR pa.`supplier_reference` LIKE '%search_word%' 
    OR pa.`ean13` LIKE '%search_word%' 
    OR pa.`upc` LIKE '%search_word%'
) 
GROUP BY `id_product` 
ORDER BY pl.`name` ASC

app.js

Build -> Clean Project

link1.html

Build -> Rebuild Project

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

Answer 1

如果您有兴趣动态更改模板的内容，可以使用以下方法完成。以下是修改后的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的模型，其属性为title和content，这将是动态的。例如，如果您调用函数changeContent，它将切换内容并使弹出框中的内容更改。 //代码在这里 var app = angular.module（＆＃39; klk＆＃39;，[＆＃39; mgcrea.ngStrap＆＃39;]）;

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

如何在角带中动态改变弹出模板

1 个答案: