2016-03-14 5 views
0

Я пытаюсь заменить определенную строку в тексте на входы с ng-моделями. Я использовал следующий код:Угловая ng-модель не работает

inlinetext.replace(buffer[x], '<input ng-model="singleQuestion.inlines[' + x + '].checkAnswer" type="text">'); 

Это делают поле ввода HTML в виду, как и ожидалось:

<input ng-model="singleQuestion.inlines[0].checkAnswer" type="text"> 

Но нг-модель не будет обновлять модели. Я на самом деле пытался скомпрометировать один и тот же фрагмент кода в HTML-представлении, и он отлично работал. Поэтому должно быть что-то в этом роде, как угловой визуализировать вид.

Моя цель Текст текста, где указаны конкретные слова, замененные входами (с собственностью ng-model). Проблема в том, что Angular не компилирует ничего, что вы ввели с помощью функции .replace().

Есть ли у кого-нибудь идеи, как это сделать?

+1

Думаю, вы должны скомпилировать элемент после замены в HTML, что-то вроде '$ компиляции (yourElement) (сфера применения);' –

+0

Это не работает. Я создал директиву 'app.directive ('динамическая', функция ($ компиляции) { возвращения { ограничения: 'A', заменить: правда, ссылки:. Функции (сфера деятельности, коий, AttrS) { сферы $ смотреть (attrs.dynamic, функция (HTML) { ele.html (HTML); $ компилировать (ele.contents()) (масштаб); });} }; }); ' и изменил вывод на: 'inlinetext.replace (buffer [x], '

');' Или у вас есть другие идеи? –

+0

Извините, я не понял, чего вы пытаетесь достичь. Можете ли вы опубликовать больше кода для директивы и как это используется? –

ответ

0

Наконец-то я понял это правильно. Вот полный код для замены строки с помощью углового скомпилированного элемента в случае, если кому-то это понадобится.

<script> 
    var testApp = angular.module('testApp', []); 

    testApp.directive('dynamic', function ($compile) { 
    return { 
     restrict: 'A', 
     replace: true, 
     link: function (scope, ele, attrs) { 
     scope.$watch(attrs.dynamic, function(html) { 
      ele.html(html); 
      $compile(ele.contents())(scope); 
     }); 
     } 
    }; 
    }); 

    testApp.controller('PhoneListCtrl', function ($scope) { 

    // Initializace text 
    var inlinetext = 'Lorem ipsum dolor form sit amet, consectetur adipiscing elit. Vivamus in form ultricies ipsum. Quisque finibus lacus neque, sed tempor lectus form gravida nec. Nam egestas dui vel elit lacini'; 

    // Replace string and bind it to directive 
    $scope.html = inlinetext.replace('form', '<input type="text" ng-model="demo">'); 
}); 
</script> 

Это result

Смежные вопросы