我有一个指令，它被调用时，通过在controller与一个array 。
在控制器我通过在，有一个对象我要循环。
我的HTML看起来像这样：
<div class="row">
<div class="col-md-6">
<div class="jumbotron" ng-controller="protocolCtrl as pctrl">
<button type="button" id="protocol" class="btn btn-primary btn-lg" ng-click="pctrl.getUpdatedList()"
data-toggle="modal" data-target="#modal">Modify Current Protocols</button>
<!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->
<modal-directive list="pctrl" headers="['ID', 'Protocol']"></modal-directive>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron" ng-controller="categoryCtrl as cctrl">
<button type="button" id="category" class="btn btn-primary btn-lg" ng-click="cctrl.getUpdatedList()"
data-toggle="modal" data-target="#modal">Modify Current Categories</button>
<!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->
<modal-directive list="cctrl" headers="['ID', 'Category']"></modal-directive>
</div>
</div>
</div>
我的问题是，无论我做什么，它总是在showes了HTML的第一个指令，无论我按下哪个按钮。
我的directive如下：
.directive('modalDirective', function(){
return {
restrict: 'E',
templateUrl: '/directives/modal-directive.html',
scope: {
list: '=',
headers: '='
},
link: function(scope, element, attrs){
console.log(attrs.list + ' | ' + attrs.headers);
}
};
});
我的modal-directive.html看起来是这样的：
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="h in headers"> {{ h }} </th>
</tr>
</thead>
<tbody>
<!-- Loop through -->
<tr ng-repeat="l in list.list">
<!--Access the actual values inside each of the objects in the array-->
<td ng-repeat="data in l"> {{ data }} </td>
<td>
<button type="button" class="btn btn-primary btn-sm"
data-toggle="modal">Edit</button>
</td>
<td>
<button type="button" class="btn btn-danger btn-sm" ng-click="list.removeData(l)"
data-dismiss="modal">Remove</button>
</td>
</tr>
</tbody>
</table>
我使用隔离示波器错了，或者是别的东西，我需要为了使这项工作改变？
更新
这里是一个小提琴 ，演示该问题。
无论我点击了哪个按钮，它会显示在模态体相同的文字。
你并不真的需要两个控制器和两个指令来实现这一目标。 下面是你如何能做到这样的例子。 请注意，我提出的控制器到该行的，而不是具有用于每一列分离的控制器。 控制器myCtrl现在可以处理这必将使用的按钮的点击功能ng-click属性。 这然后确定哪些文本应该在哪里通过调用有各自的功能被放置。 IE proto()和cat()
现在，这取决于你如何计划你的应用程序的架构，这可能不理想您的具体情况。 但是，它适用于当前的问题，在你提供什么样的条件。
HTML
<body ng-app="TM">
<div class="row" ng-controller="myCtrl as modalControl">
<div class="col-md-6">
<div class="jumbotron" >
<button
ng-click='proto()'
type="button" id="protocol"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#modal">Modify Current Protocols
</button>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
<button
ng-click='cat()'
type="button"
id="category"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#modal">Modify Current Categories
</button>
</div>
</div>
<!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->
<modal-directive ctrl="modalControl"></modal-directive>
</div>
</body>
角JS
angular.module('TM', [])
.controller('myCtrl', function($scope){
$scope.text ='default';
$scope.proto = function() {
this.text = 'Now looking at the protocol part'
}
$scope.cat = function() {
this.text = 'Now looking at the category part'
}
})
.directive('modalDirective', function(){
return {
restrict: 'E',
scope: true,
template: ['<div id="modal" class="modal fade" role="dialog">',
'<div class="modal-dialog">',
'<div class="modal-content">',
'<div class="modal-header">',
'<h4 class="modal-title">Modal Header</h4>',
'</div>',
'<div class="modal-body">',
'<p> {{ text }} </p>',
'</div>',
'<div class="modal-footer">',
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
'</div>',
'</div>',
'</div>',
'</div>'].join('')
}
});
演示：
https://jsfiddle.net/DTcHh/10193/
更新：
好吧，我又看看。 而且即使在上面的例子中工作。 我注意到，我有一些额外的事情，我并不一定需要。 例如myCtrl as modalControl不需要as modalControl一部分。 下面是一个更新的例子。 我这样做是一个有些不同的简化的标记。
HTML：
<body ng-app="TestApp">
<div ng-controller="myCtrl">
<button ng-click="one()">One</button>
<button ng-click="two()">Two</button>
<test-directive></test-directive>
</div>
</body>
角实施例（无隔离的范围）
angular.module('TestApp', [])
.controller('myCtrl', function($scope){
$scope.text ='default';
$scope.one = function() {
this.text = 'this is one'
}
$scope.two = function() {
this.text = 'this is two'
}
})
.directive('testDirective', function(){
return {
template: "<div id='test'>{{text}}</div>"
}
});
演示2：
https://jsfiddle.net/krishollenbeck/v8tczaea/12/
注意：这个..
restrict: 'E',
scope: true
因为我不是在这个例子中使用隔离范围也是没有必要的。 这里更多信息https://docs.angularjs.org/guide/directive
请检查此的jsfiddle 。
其原因是， data-target值指向模态的DOM元素的id。 如果你解决了这个ID在该指令模板，点击该按钮会一直主动与ID的模态modal 。 所以，你需要做的modalId作为指令的另一参数。
顺便说一句，你可以通过控制器的指令。 就像这样的jsfiddle ：
angular.module('Joy', [])
.controller('MyCtrl', ['$scope', function ($scope) {
this.value = 'Joy';
}])
.directive('passMeContrller', [function () {
return {
restrict: 'A',
scope: {
ctrl: '=',
},
template: '<div>Value: {{ctrl.value}}</div>'
};
}]);
该HTML：
<div ng-app="Joy" ng-controller="MyCtrl as c">
<div pass-me-contrller ctrl="c"></div>
<hr>
<div ng-bind="c.value"></div>
</div>
因为控制器本身只是一个JavaScript对象。
温馨提醒：您正在使用protocolCtrl as pctrl ，所以你需要指定一个像this.list=... 。
如果你想在一个函数传递给隔离的范围，使用& 。
不过 ，我建议不要在整个传递controller的指令。 甲控制器被设计为：
- 建立$范围对象的初始状态。
- 添加行为到$ scope对象。
控制器不应该被重用。 通常上有许多属性$scope ，而他们中的一些传递给该指令将不会被其使用。
