【发布时间】：2015-01-11 01:21:17
【问题描述】：
我有一个 JSBin here 我正在尝试做的事情。我有一个控制器和一个指令（它们是兄弟）。
我想跟踪几个复选框状态的控制器，以及我想用复选框填充 div 的指令（在我的实际应用程序中，该指令处理大约十几个不同模板的显示）。复选框的状态保存在服务中，该服务将在应用程序的不同部分再次访问。
由于我想保持“controller as”语法而不是将所有内容都转储到$scope，因此我很难让指令使用控制器范围。
最好将复选框切换代码移动到指令中，还是有什么方法可以将控制器范围包含到指令中？我尝试过使用scope 指令选项但没有成功。
编辑：在这里发布来自 JSBin 的代码：
HTML：
<!DOCTYPE html>
<html ng-app='MyApp'>
<head>
<script src='https://code.angularjs.org/1.3.1/angular.js'></script>
<script src='http://code.angularjs.org/1.3.1/angular-sanitize.js'></script>
<script src='data-service.js'></script>
<script src='my-app.js'></script>
<script src='my-directives.js'></script>
</head>
<body ng-controller='MyController as myCtrl'>
<div checkbox-template=''></div>
Checked boxes: <div ng-repeat='checked in data.checkboxes'>{{checked}}</div>
</body>
</html>
JavaScript：
我的指令.js
dir = angular.module('my-directives', []);
dir.directive('checkboxTemplate', function(){
return {
restrict: 'A',
template: "<ul><li ng-repeat='cb in data.tpl1' ng-bind-html='myCtrl.renderHtml(cb)'></ul>"
};
});
数据服务.js：
dat = angular.module('data-service', []);
dat.service('DataService', function() {
return {
checkboxes: [],
tpl1: [
"<label><input type='checkbox' value='1' ng-click='boxToggle(1)' ng-checked='data.checkboxes.indexOf(1) > -1'/>Checkbox 1</label>",
"<label><input type='checkbox' value='2' ng-click='boxToggle(2)' ng-checked='data.checkboxes.indexOf(2) > -1'/>Checkbox 2</label>"
]
};
});
我的应用程序.js：
app = angular.module('MyApp', ['ngSanitize', 'my-directives', 'data-service']);
app.controller('MyController', ['$scope', '$sce', 'DataService', function($scope, $sce, DataService) {
this.data = DataService;
self = this;
this.renderHtml = function(raw_html){
return $sce.trustAsHtml(raw_html);
};
this.boxToggle = function(idx) {
i = this.data.checkboxes.indexOf(idx);
alert('Toggling Checkbox');
if (i > -1) {
this.data.checkboxes.splice(i,1);
} else {
this.data.checkboxes.push(idx);
}
};
}]);
【问题讨论】：
-
很好的解决方案！按照我试图达到的方式工作。