Проблем със създаването на ng-model в Директива {Не е свързано с проекта}
Правя си опити с една формичка за контакти и имам проблем с декларирането на ng-model в темплейта, в една директива. Знам че не се създава, защото е единствено в скоупа на директивата, но не знам как да го закача за скоупа на контролера. Идеята е че ng-model-а ми трябва, за да го използвам за проверка с ng-show в HTML-a.
Имам два радио бутона и искам, когато единия е чекнат да ми изкарва допълнително съдържание отдолу, а когато другия е цъкнат да скрива.
Контролера ->
.controller('HomeController', ['$scope','$http', 'fileName', function($scope, $http, fileName){
$http.get(fileName)
.then(function(response){
var mainObj = [];
for(var i = 0; i < response.data.length; i++){
for(var j = 0; j < response.data[i].length; j++){
mainObj.push(response.data[i][j]);
}
}
$scope.content = mainObj;
});
//$scope.$on('radioButton',function(ev, data){ $scope.really = data; });
}])
Директивата ->
.directive('radioTag', ['$compile', '$rootScope', function($compile, $rootScope) {
return {
restrict: 'A',
scope: {
tag: '='
},
link: function (scope, element) {
//var getTemplate = function () {
var template = '';
if (scope.tag.type === 'radio') {
var choicesCounter = scope.tag.choices;
var checkIt = {};
checkIt.ch1 = [];
for (var i = 0; i < choicesCounter.length; i++) {
if (i === 0) {
checkIt.ch1.push({
id: scope.tag.choices[i].id,
title: scope.tag.choices[i].title,
value: "cardMethod"
});
}
else {
checkIt.ch1.push({
id: scope.tag.choices[i].id,
title: scope.tag.choices[i].title,
value: "otherMethod"
});
}
}
scope.checkIt1 = checkIt;
scope.really = "!";
//$rootScope.$broadcast('radioButton',scope.really);
// template += '{{really}}<div class="btn-group col-xs-12" data-toggle="buttons">';
// template += '<span ng-repeat="el in checkIt1.ch1"><label class="btn btn-primary btn-primary-spacing col-xs-5"><input type="{{tag.type}}" ' +
// 'id="{{el.id}}" ' +
// 'name="{{tag.paramName}}" ' +
// 'ng-model="$parent.$parent.$parent.really" ' +
// 'value="{{el.value}}" ' +
// '/>{{el.title}}</label><span class="col-xs-1"></span></span>';
// template += '</div>';
//}
//return template;
};
//
//var compile = function () {
// var template = getTemplate();
// element.append(template);
// $compile(element.contents())(scope);
//};
//
//compile();
},
template:
' {{really}}<div class="btn-group col-xs-12" data-toggle="buttons">'+
'<span ng-repeat="el in checkIt1.ch1"><label class="btn btn-primary btn-primary-spacing col-xs-5"><input type="{{tag.type}}" ' +
'id="{{el.id}}" ' +
'name="{{tag.paramName}}" ' +
'ng-model="really" ' +
'value="{{el.value}}" ' +
'/>{{el.title}}</label><span class="col-xs-1"></span></span></div>'
};
}])
HTML-a ->
<div style="max-width:700px" ng-controller="HomeController" class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" name="registration_form" id="registration_form">
<br /><br/>
<fieldset>
<legend class="text-center header">Contact Details</legend>
<div class="form-group">
<div ng-repeat="el in content">
<span radio-tag really="really" tag=el ng-show = "el.type == 'radio'"></span>
<span ng-show="really === 'cardMethod'" card-tag tag=el ng-if = "el.type == 'cardIcons'"></span>
<span ng-show="really === 'cardMethod'" select-tag tag=el ng-if = "el.type == 'select'"></span>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
Знам че кодът малко трудно се чете, съжалявам.
Ами да, когато постнах въпроса мислех че проблемът е там, но го направих с scope:true, което е същото като scope.$parent, но не става. Бъркам се с тези ng-repeat-oве, защото имам на няколко и мисля че те объркват скоупа и и в крайна сметка целта ми е да създам ng-model, от който да взема стойността, когато бутона е кликнат и да я използвам за проверка с ng-show...