我创建了一个自定义指令,其中包含事件处理程序并使用它3次。
<div sl-entity-browser btn_label="Browse supplier" handler="supplier_selection_handler(entity)" />
<div sl-entity-browser btn_label="Browse checker" handler="checker_selection_handler(entity)" />
<div sl-entity-browser btn_label="Browse approving officer" handler="approvar_selection_handler(entity)" />
在我的控制器中:
$scope.supplier_selection_handler = function(entity){
$scope.selectedSupplier = entity;
}
$scope.checker_selection_handler = function(entity){
$scope.selectedChecker = entity;
}
$scope.approvar_selection_handler = function(entity){
$scope.selectedApprovingOfficer = entity;
}
我的指示:
return {
scope : {
btnLabel : '@',
handler: '&'
},
restrict: 'AE',
templateUrl: '/common/sl-entity-browser',
link: function (scope, elem, attrs) {
// expose selected account to the outside world
scope.selectEntity = function(entity) {
return $timeout(function() {
return scope.handler({
entity: entity
});
});
}
}
};
HTML模板:
<button title="browse account" class="btn btn-primary" data-toggle="modal" data-target="#slEntityModal"> {{ btnLabel }}</button>
<div class="modal fade" id="slEntityModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" style="width: 90%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Browse entities</h4>
</div>
<div class="modal-body">
<div>
<div class="row">
<div class="input-group pull-right" style="width: 300px">
<input class="form-control" placeholder="Search" ng-model="query" />
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="row-top-buffer" style="margin-top: 15px"/>
<div class='row' style="border-top: 1px solid #dcdcdc; padding-top: 10px">
<div class="col-md-1 col-lg-1"><span style="font-weight: bold; padding-left: 2px;">Acct No</span></div>
<div class="col-md-5 col-lg-5"><span style="font-weight: bold; padding-left: 30px;">Name</span></div>
<div class="col-md-6 col-lg-6"><span style="font-weight: bold">Address</span></div>
</div>
<div class="row-top-buffer" style="margin-top: 5px"/>
<div class="row" style='max-height: 500px; overflow: auto;'>
<div ng-show="!slEntities">Loading entities...</div>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr data-dismiss="modal" ng-repeat="entity in entities = (slEntities | filter:query)" style="cursor: pointer" ng-click="selectEntity(entity)">
<td style="width: 100px;">{{entity.accountNo}}</td>
<td style="width: 480px;">{{entity.name}} <span class="label {{entityClass(entity.marker)}} pull-right">{{convert(entity.marker)}}</span></td>
<td>{{entity.address}}</td>
</tr>
<tr ng-show="entities.length == 0"><td colspan="3" align="center">No records found</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
该指令将呈现一个按钮,该按钮将在单击时显示模态。模态包含一个项目表。如果选择了某个项目,则将处理模态,并且事件应触发定义的正确项目。问题是第一个指令实例&#39;始终调用事件处理程序(supplier_selection_handler)。
我是AngularsJs的新手。
提前致谢。
答案 0 :(得分:1)
这是因为你的指令打开的模态(所有这些!)是第一个指令的模态。请注意,您的所有模态共享相同的ID?并且按钮的data-target
共享相同的ID?由于元素的ID是唯一的,因此一旦找到具有该特定ID的元素,它将停止搜索具有这种ID的另一元素。因此,打开模态的所有按钮都会打开第一个模态。
我建议您使用angular-bootstrap's modal代替,组件本身在AngularJS上下文中运行,因此不会出现范围问题。
以下示例显示了如何创建可以使用angular-bootstrap模式的指令,我修改了下面的代码以简化演示。
<强> INDEX 强>
<body ng-controller="Ctrl">
<button sl-entity-browser
btn-label="hello world"
handler="messageHandler('This is a message from hello world')"
class="btn btn-primary">
Hello World?
</button>
<button sl-entity-browser
btn-label="Yeah Baby"
handler="messageHandler('WEEEE wOoOoOw')"
class="btn btn-primary">
Baby?
</button>
<button sl-entity-browser
btn-label="Boom!"
handler="messageHandler('This is kaboom boom!')"
class="btn btn-primary">Kaboom!</button>
</body>
<强>模态强>
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
{{ btnLabel }}
</div>
<div class="modal-footer">
<button
ng-click="handler()"
class="btn btn-primary pull-left">
Click ME!
</button>
</div>
<强> JAVASCRIPT 强>
(function(angular) {
var app = angular.module('app', ['ui.bootstrap']);
app.controller('Ctrl', function($scope, $window) {
// handler function
$scope.messageHandler = function(message) {
$window.alert(message);
};
});
// directive assignment
app.directive('slEntityBrowser', slEntityBrowser);
function slEntityBrowser() {
// directive definition
return {
scope: {
btnLabel: '@',
handler: '&'
},
controller: slEntityBrowserController,
link: slEntityBrowserLink
};
}
// directive controller
function slEntityBrowserController($scope, $modal) {
// create open() method
// to open a modal
$scope.open = function() {
$modal.open({
scope: $scope,
templateUrl: 'sl-entity-browser-modal.html'
});
};
}
// directive link
function slEntityBrowserLink(scope, elem) {
// register click handler on the current element
// to open the modal
elem.on('click', function() {
scope.open();
});
}
})(window.angular);