Javascript angular.js模板变量到引导框对话框？_Javascript_Jquery_Angularjs_Bootbox

Javascript angular.js模板变量到引导框对话框？

javascript jquery angularjs

Javascript angular.js模板变量到引导框对话框？,javascript,jquery,angularjs,bootbox,Javascript,Jquery,Angularjs,Bootbox,我已经想了10个小时了。是时候求助了我试图将angular.js模板变量中的一个变量传递给bootbox，以获得一个漂亮的确认提示假设我有以下内容（为了清楚起见缩写）： $（文档）。在（“单击“，”上。确认“，（功能（e））{ e、预防默认值（）； confirm（“这需要是{{item.name}}的值”，函数（confirm）{ 控制台日志（“已确认：+已确认”）； }); })); 其执行方式如下： <ul class="list-group"> <li

我已经想了10个小时了。是时候求助了

我试图将angular.js模板变量中的一个变量传递给bootbox，以获得一个漂亮的确认提示

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


$（文档）。在（“单击“，”上。确认“，（功能（e））{
e、 预防默认值（）；
confirm（“这需要是{{item.name}}的值”，函数（confirm）{
控制台日志（“已确认：+已确认”）；
});
}));

其执行方式如下：

<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功能，我已经使用了

，但这对我在迭代时从列表中检索单个条目没有帮助。任何帮助都将不胜感激

这是一个简单的方法，但取决于您试图做什么，它可能不适合您：

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>




作为指令应用
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>

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







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

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

angular.module（'myApp'，[]）
.controller（'MainController'，函数（$scope）{
$scope.items=[
{name:'one'}，
{name:'two'}，
{name:'three'}
];
})
.directive（'confirButton'，function（）{
返回{
限制：'E'，
作用域：{name:'@'}，
模板：“”，
控制器：功能（$scope）{
$scope.confirm=函数（名称）{
bootbox.confirm（“此项的$scope.items中的名称为：”+名称，函数（结果）{
如果（结果）{
console.log（'Confirmed！'）；
}否则{
console.log（'Cancelled'）；
}
});
};
}
}
});

 < /P>而不是类=“确认”，你可以使用NG点击=“函数名（item）”，并在函数中为传入的项目做Boobox的东西。你也可以考虑将所有（标记和JavaScript）折叠成一个指令。它可以使事情更容易概念化和使用，因为它更适合AngularJS范式。感谢大家的回复。最后，我给出了“aet”的简单答案。我从来没有意识到我可以从我的
函数AppCtrl（$scope）{…}
中调用bootbox对话框。事实证明，传入该项是一个快速而简单的解决方案，可以处理我已经编写的99%的代码。我意识到这可能并不理想，但我真的只是在为自己开发一个小小的网络应用。它只需要发挥作用。除了我没有人会用它。再次感谢！每个人的回答都很好。我给了马尔克一个工作的答案。感谢所有花时间回答问题的人！