Question

我一直在努力解决这个问题10个小时了。是时候寻求帮助了！

我正在尝试将angular.js模板变量中的变量传递给bootbox，以获得漂亮的确认提示。

假设我有以下内容（为清楚起见缩写）：

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

这样执行：

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

当用户点击该链接时，我希望显示一个确认框，并且我需要包含特定于此元素的{{item.name}}和{{item.row}}等属性列表。

我已经阅读了angular.js的$ compile功能，到目前为止我已经使用了<div compile="name">，但这对我从列表中检索单个条目没有帮助正在迭代。任何帮助将不胜感激！

Answer 1

作为指令申请......

<强> 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：

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

这是一种简单的方法，但根据您的尝试，它可能不适合您：

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);
        });
    };
});

在你的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>

根据您的需要，您可以查看指令：https://docs.angularjs.org/guide/directive

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

2 个答案: