1

我已经尝试了 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">但它并不能帮助我在迭代时从列表中检索单个条目。任何帮助，将不胜感激！

4

2 回答 2

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

工作笨拙

于 2014-04-24T03:59:58.770 回答
0

这是一种简单的方法，但取决于您尝试执行的操作，它可能不适合您：

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

于 2014-04-24T00:59:21.807 回答