1

Делаю запрос для получения доступных способов оплаты.
Для некоторых приходят доп. поля. К примеру, для QIWI - номер телефона.
Не знаю как такое поле ввести под валидацию.

Код обработки результата:

<div id="payments">
    <div payments-directive ng-repeat="payment in payments track by $index">
        <span id="a2dCheckBox{{ payments[$index].id }}" data-discount="{{ payments[$index].discount }}" ng-click="setPayment(payment)"></span>
        <img width="32" alt="{{ payments[$index].name }}" src="{{ payments[$index].icon }}">
        <label>{{ payments[$index].name }}</label>
        <span ng-if="payments[$index].discount>0">{{ payments[$index].extra }}</span>
        <div
            ng-if="payments[$index].addFields.length>0"
            ng-bind-html="getHtmlContent(payments[$index].addFields)"
            id="payDesc{{ payments[$index].id }}"
        >addFields</div>
    </div>
</div>

Пробую хотя бы значение присвоить:

$scope.getPayments = function() {
    if ($scope.form.$valid ) {
        $http({
            url: url,
            method: "GET",
            data: {},
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).success(function(data) {
            $scope.payments = data.payments;    
            $scope.showQIWI = true;
            $scope.payment.qiwi = '9876543210';
            $timeout(function() {
                $scope.$apply(function() {
                    $scope.payment.qiwi = '9876543210';
                });
            });
        });
    }
};

Но бесполезно.

addFields с сервера для QIWI:

<b>+7&nbsp;&nbsp;</b><input 
    type="text" name="phone_for_qiwi" class="field_text" id="phone_for_qiwi" value="" 
    ng-show="showQIWI" show-valid 
    ng-model="payment.qiwi" 
    ng-click="alertQIWI()" 
>
<br/>
QIWI - Электронная платёжная система. Оплата в терминалах и через QIWI Кошелек.

Вообще ничего не работает: ни ng-click, ни значение не присваивается, ни валидация.

UPD1: console.log(payment.qiwi) показывает значение, но ng-model="payment.qiwi" не подхватывает его.

UPD2:
Прошу прощения:

console.log(payment.qiwi) => console.log($scope.payment.qiwi)

UPD3:
Сейчас:

$scope.getHtmlContent = function(html){
    var _html = $sce.trustAsHtml(html);
    return _html;
};

Если сделать так:

$scope.getHtmlContent = function(html){
    var _html = $sce.trustAsHtml(html);
    var $html = $compile(_html);
    return $html;
};

То получаю:

function (b,c,d){Sb(b,"scope");d=d||{};var e=d.parentBoundTranscludeFn,h=d.transcludeControllers;d=d.futureParentElement;e&&e.$$boundTransclude&&(e=e.$$boundTransclude);g||(g=(d=d&&d[0])?"foreignobject"!==ua(d)&&d.toString().match(/SVG/)?"svg":"html":"html");d="html"!==g?A(Yb(g,A("
").append(a).html())):c?Pa.clone.call(a):a;if(h)for(var l in h)d.data("$"+l+"Controller",h[l].instance);S.$$addScopeInfo(d,b);c&&c(d,b);f&&f(b,d,d,e);return d}
5
  • В функции getHtmlContent что у Вас происходит? Запрос на сервер? И что возвращает? promise? Попробуйте использовать для ng-bind-html переменную, значение ей присваивать в success-функции запроса html-темплейта.
    – workres
    23 июн 2015 в 7:48
  • @workres ` $scope.getHtmlContent = function(html){ return $sce.trustAsHtml(html); }; ` \n ` ng-bind-html="getHtmlContent(payments[$index].addFields)" ` Я пытаюсь из строки построить HTML addFields с сервера для QIWI привел в вопросе
    – borodatych
    23 июн 2015 в 8:01
  • Ясно, может может так попробовать stackoverflow.com/questions/24459194/… , как в правильном ответе? showQIWI == true?
    – workres
    23 июн 2015 в 8:07
  • По ссылки вариант не помог. Сори забыл, добавил, но у меня было и есть сразу после получения ответа с сервера: $scope.showQIWI = true;
    – borodatych
    23 июн 2015 в 8:16
  • Выложил код, вдруг поможет прояснить: jsfiddle.net/borodatych/8vb92s98
    – borodatych
    23 июн 2015 в 8:22

2 ответа 2

1

Используйте $compile.

Обновление

Создайте директиву вместо ng-bind-html. Она должна вставлять в текущий элемент новый, типа angular.element(elem).append(_html). После этого: $compile(elem)(scope);. Это скомпилирует новый элемент в scope.

4
  • по возможности, пишите, пожалуйста, более развёрнутые ответы. 23 июн 2015 в 11:34
  • Пробовал UPD3 - так?
    – borodatych
    23 июн 2015 в 12:07
  • Нет, не так. Обновил ответ.
    – ne3Vubeki
    23 июн 2015 в 12:17
  • Сделал так: jsfiddle.net/borodatych/8vb92s98/1 ::: Ругаетцо: docs.angularjs.org/error/$compile/… ::: Делал require, не помогло, предположительно директива не верна.
    – borodatych
    23 июн 2015 в 12:58
0

Благодаря ответам @ne3Vubeki, получаем следующее:

<div id="payments">
    <div class="tl mb20" payments-directive ng-repeat="payment in payments track by $index">
        <span id="a2dCheckBox{{ payments[$index].id }}" data-discount="{{ payments[$index].discount }}" ng-click="setPayment(payment)" class="a2dCheckBox alignMiddle anime mr30"></span>
        <img width="32" alt="{{ payments[$index].name }}" src="{{ payments[$index].icon }}">
        <label class="cGrey ml10"><span ng-bind="payments[$index].name"></span></label>
        <span class="red ml10" ng-if="payments[$index].discount>0"><span ng-bind="payments[$index].extra"></span></span>
        <div
            id="payDesc{{ payments[$index].id }}" class="payDesc" style="display:block;"
            add-fields="{{ payment.addFields }}"
            >
            addFields
        </div>
    </div>
</div>

По сути ни чего нового - заменил директиву.

Код новой директивы addFields:

app.directive('addFields', function($compile){
    var odd = {
        transclude: true,
        restrict: 'A',
        link: function(scope, element, attrs){
            var template = "<div>"+attrs.addFields+"</div>";
            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
        }
    };
    return odd;
});

ОЧЕНЬ ВАЖНО!

Нужно что бы в коде был хоть один тег. Я просто обернул в DIV.
Иначе система ругаетца на контент, ждет HTML.

UPD1:
Поля компилируются, но как то не до конца оно завелось: работал ng-click, но не отрабатывала прописанная директива show-valid, причем я мог задать true/false переменным в директиве ng-show.
В общем схожая проблемы у братьев по духу.
Итого директиву можно переписать так:

app.directive('addFields', function($compile){
    var odd = {
        transclude: true,
        restrict: 'A',
        link: function(scope, element, attrs){
            var template = "<div>"+attrs.addFields+"</div>";
            var result = $(template).appendTo(element);
            $compile(result)($scope);
        }
    };
    return odd;
});

Подмечу: Ребята тоже перед компиляцией оборачивают в div.
И еще запомни!

Firstly include in the DOM, then compile

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.