Софтуерно Инженерство
Loading...
antonp1p2 avatar antonp1p2 17 Точки

Проблем със създаването на 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>

 

Знам че кодът малко трудно се чете, съжалявам.

Тагове:
0
Advanced Level: Front-End
DiyanTonchev92 avatar DiyanTonchev92 233 Точки

Aко правилно съм разбрал какво искаш да направиш, в директивата, в link функцията, можеш да достъпиш скоупа на контролера с scope.$parent

0
antonp1p2 avatar antonp1p2 17 Точки

Ами да, когато постнах въпроса мислех че проблемът е там, но го направих с scope:true, което е същото като scope.$parent, но не става. Бъркам се с тези ng-repeat-oве, защото имам на няколко и мисля че те объркват скоупа и и в крайна сметка целта ми е да създам ng-model, от който да взема стойността, когато бутона е кликнат и да я използвам за проверка с ng-show...  

0