0
나는 무엇을 하려는지 JSBin here을 가지고 있습니다. 나는 컨트롤러와 지시문 (형제)을 가지고있다.지시어의 컨트롤러 범위를 사용하는 angularjs
컨트롤러 몇 가지 체크 박스의 상태를 추적하고 싶습니다. 그리고 지시문은 체크 박스로 div를 채 웁니다 (실제 응용 프로그램에서는 지시문이 약 12 개의 다른 템플릿을 표시합니다). 확인란의 상태는 응용 프로그램의 다른 부분에서 다시 액세스 할 수있는 서비스에 저장됩니다.
$scope에 모든 것을 덤핑하는 것과는 대조적으로 '컨트롤러를'구문을 유지하기 위해 컨트롤러 범위를 사용하여 주위를 두드리는 데 어려움을 겪고 있습니다.
체크 박스 토글 링 코드를 지침으로 이동하는 것이 가장 좋습니까? 아니면 컨트롤러 범위를 지시문에 포함시키는 방법이 있습니까? 나는 성공하지 않고 scope 지시어 옵션으로 놀아 보려고 노력했다.
편집 :
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>
자바 스크립트 :
내-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 여기 JSBin에서 배치하는 코드 :
,210dat = 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/. Ref : http://stackoverflow.com/questions/17417607/angular-ng-bind-html-unsafe-and-directive-within-it. – themyth92
훌륭한 솔루션! 내가 그것을 얻으려고했던 방식으로 작동합니다. – wikenator