У меня есть JSBin here с тем, что я пытаюсь сделать. У меня есть контроллер и директива (которые являются братьями и сестрами).angularjs с использованием области контроллера в директиве
Контроллер Я хочу отслеживать состояние нескольких флажков, а директива, которую я хочу заполнить div, с помощью флажков (в моем реальном приложении директива обрабатывает отображение около десятка разных шаблонов). Состояние флажков сохраняется в службе, к которой снова будет обращаться в другой части приложения.
Поскольку я хочу поддерживать синтаксис «контроллер как», а не просто сбрасывать все в $scope, у меня возникают серьезные трудности, обертывая голову вокруг того, что директива использует область управления.
Было бы лучше переместить флажок, переключающий код в директиву, или есть способ включить область управления в директиву? Я пробовал играть с опцией scope без успеха.
Edit: Добавлено код из 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:
моих-directives.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>"
};
});
данных service.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>"
]
};
});
мои-app.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);
}
};
}]);
Вы могли бы сделать что-то подобное http://jsfiddle.net/bgr1ofyo/. Ссылка: http://stackoverflow.com/questions/17417607/angular-ng-bind-html-unsafe-and-directive-within-it. – themyth92
отличное решение! работает так, как я пытался его получить. – wikenator