Проблемы привязки Angularjs для динамически создаваемых элементов

Я пытаюсь связать <p> с <input> в моем приложении, но этого не происходит. поскольку оба элемента динамически созданы, я подумал, что, может быть, я могу использовать $ apply, но это не сработало. все остальное работает как ожидалось, кроме этого.

Мой код немного сложный, так что вот plunker, чтобы продемонстрировать свою ситуацию.

HTML:Проблемы привязки Angularjs для динамически создаваемых элементов

<body ng-app="tata" ng-controller="mainController"> 
    <div id="main"> 
     <div ng-controller="ctrl1"> 
     <button ng-click="changeCard()">Add Dynamic Bound Elements </button> 
     <page id="front" size="A4"></page> 
     <div id="detailsFront"></div> 
     </div> 
    </div> 
    </body>

элементы генерируются с использованием 2 функции, на входных и другой для P. Вот где input s размещены:

<div id="detailsFront">   
</div>

и здесь, где p с:

<page size="A4" id="front"> 
</page>

Координаты ntroller, ответственный за это представление, имеет 2 функции, которые запускаются последовательно в одной и той же функции $scope. Наполнение <p> S:

buildPDF : function (parentElement){ 
     var element = angular.element(document.getElementById(parentElement)); 
     ele = "<p ng-bind='id7'> Test Run </p>"; 
     element.append(ele); 
    } 

    element.append(ele);

Тогда input ые:

buildPDFControllers : function (parentElement){ 
      var element = angular.element(document.getElementById(parentElement)); 
     ele = "<label for='id7'>Some Label</label> <input name='id7' type='text' ng-model='id7'>"; 
     element.append(ele); 
     }

источник

2015-09-06 user2517028

Вам нужно для '$ компиляции (вещи) (масштаб);' и, возможно, вам следует использовать директивы. И plunker было бы хорошо. –

Вы правы, я обновил вопрос с помощью Plunker – user2517028

Любая помощь из примера, нет? –

Вы должны всегда $compile новых элементов.

HTML

<body ng-app="tata"> 
    <div ng-controller="ctrl1"> 
    <page id="front"></page> 
    </div> 
</body>

код JavaScript

var app = angular.module('tata', []) 

    .controller('ctrl1', function ($scope, $compile) { 
    $scope.id = 'some id here'; 

    var element = angular.element(document.getElementById('front')); 
    var p = '<p ng-bind="id">Test Run</p>'; // <- will be bound/replaced with $scope.id 
    element.append(p); 

    $compile(element.contents())($scope); 
    });

Но, возможно, вы бы лучше использовать директивы вместо этого?Рассмотрим:

HTML шаблон

<body ng-app="cards" ng-controller="Ctrl"> 
    <button ng-click="addCard()">Add Card</button> 
    <div ng-repeat="card in cards"> 
    <card ng-model="card"></card> 
    </div> 
</body>

JavaScript

angular.module('cards',[]) 

    .controller('Ctrl', function($scope) { 
    $scope.cards = []; 

    $scope.addCard = function() { 
     var next = $scope.cards.length + 1; 
     $scope.cards.push({id: next, label: next}); 
    }; 
    }) 

    .directive('card', function() { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     scope: { 
     ngModel: '=' 
     }, 
     template: '<p>Directive model: {{ ngModel | json }}</p>' + 
       '<label>Label: </label>' + 
       '<input name="{{ ngMode.id }}" ' + 
       '  type="text" ' + 
       '  ng-model="ngModel.label">', 
     link: function(scope) { 
     } 
    }; 
    });

источник

2015-09-06 14:06:54

Вы, вероятно, будет лучше использовать директивы для этого - и вы можете даже не нужно свернуть свой собственный. Посмотрите на ng-include: он позволяет вам переключать используемый HTML-шаблон на основе переменной в вашей области. Что-то вроде:

inputText-view.html:

<p ng-style="style">{{value.content}}</p>

page.html:

<page size="A4" id="front" style="position: absolute, top:0px, left:0px"> 
    <ng-include 
     ng-repeat="value in values" 
     src="value.type + '-view.html'"></ng-include> 
</page>

See here for a demo.

Here's another demo based on your plunk.

источник

2015-09-06 12:10:24 z0r

@ z0r спасибо, мне кажется, интересно, я не знал, что могу использовать ng-include. Что предпочтительнее, ng-view или ng-include? – user2517028

@MikkoViitala Достаточно честно, я просто шел по документам: «Как правило, вы не используете' ngBind' напрямую ». Но ты прав; Я удалю эту рекомендацию. – z0r

Я обновил вопрос с помощью плункера, если вы можете найти решение для этого, я буду отмечать его как принятый ответ. + я рассмотрю ng-include – user2517028

Проблемы привязки Angularjs для динамически создаваемых элементов

ответ

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