angular.js模板变量到启动对话框？

Question

I've been trying to figure this out for like 10 hours now. 我已经尝试解决了大约10个小时。 Time to ask for help! 是时候寻求帮助了！

I'm trying to pass a variable from an angular.js template variable to bootbox for a nice looking confirmation prompt. 我正在尝试将变量从angular.js模板变量传递到bootbox，以获取美观的确认提示。

Assume that I have the following (abbreviated for clarity): 假设我有以下内容（为清楚起见，简称为：）

<script>
      $(document).on("click", ".confirm", (function(e) {
        e.preventDefault();
        bootbox.confirm("This needs to be the value of {{item.name}}", function(confirmed) {
          console.log("Confirmed: "+confirmed);
        });
      }));
</script>

which is executed as such: 这样执行：

<ul class="list-group">
    <li ng-repeat="item in items">
         <a href="" class="confirm"><span class="glyphicon glyphicon-fire red"></span></a>
    </li>
</ul>

When the user clicks the link, I would like a the confirmation box to appear, and I need to include attributes like {{item.name}} and {{item.row}} that are specific to this element in the list. 当用户单击链接时，我希望出现一个确认框，并且我需要在列表中包括特定于此元素的属性，例如{{item.name}}和{{item.row}}。

I have read up on the $compile functionality of angular.js and I got it working in so far as having a <div compile="name"> but that doesn't help me for retrieving a single entry out of my list as I am iterating. 我已经阅读了angular.js的$ compile功能，并且得到了一个<div compile="name">帮助，但是当我从列表中检索单个条目时，这无济于事在迭代。 Any help would be appreciated! 任何帮助，将不胜感激！

Answer 1

Applied as a directive... 用作指令...

HTML: HTML：

<body ng-app="myApp" ng-controller="MainController">
  <ul class="list-group">
    <li ng-repeat="item in items">
         <confirm-button name="{{item.name}}"></confirm-button>
    </li>
  </ul>
</body>

JS: JS：

angular.module('myApp', [])
.controller('MainController', function($scope) {
  $scope.items = [
    { name: 'one' },
    { name: 'two' },
    { name: 'three' }
  ];
})
.directive('confirmButton', function(){
  return {
    restrict: 'E',
    scope: { name: '@' },
    template: '<a href="#" class="confirm"><span class="glyphicon glyphicon-fire red" ng-click="confirm(name)">Button</span></a>',
    controller: function($scope) {
      $scope.confirm = function(name) {
        bootbox.confirm("The name from $scope.items for this item is: " + name, function(result){
          if (result) {
            console.log('Confirmed!');
          } else {
            console.log('Cancelled');
          }
        });
      };
    }
  }
});

Working plunk 工作勤奋

Answer 2

This is a simple approach, but depending on what you're trying to do it may not suit you: 这是一种简单的方法，但是根据您要执行的操作，可能不适合您：

var app = angular.module('app', []);

app.controller('AppCtrl', function ($scope) {
    $scope.items = [
        { name: "Bla bla bla bla?", url: "http://stackoverflow.com" },
        { name: "Ble ble ble ble?", url: "http://github.com" }
    ];

    $scope.confirm = function (item) {
        bootbox.confirm("Confirm?", function (confirmed) {
            alert('Confirmed: '+ confirmed +'. Url: '+ item.url);
        });
    };
});

In your html: 在您的html中：

<div ng-app='app' ng-controller="AppCtrl">
    <ul class="list-group">
        <li ng-repeat="item in items">
            <a ng-click="confirm(item)">
                <span class="glyphicon glyphicon-fire red"></span> 
                {{ item.name }}
            </a>
        </li>
    </ul>
</div>

Depending on what you want, maybe you should check out the directives: https://docs.angularjs.org/guide/directive 根据您的需求，也许您应该查看以下指令： https : //docs.angularjs.org/guide/directive

angular.js模板变量到启动对话框？

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-04-24 03:59:58

解决方案2
0 2014-04-24 00:59:21

angular.js模板变量到启动对话框？

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-04-24 03:59:58

解决方案2 0 2014-04-24 00:59:21

解决方案1
1 已采纳 2014-04-24 03:59:58

解决方案2
0 2014-04-24 00:59:21