Оценка таможенной Директивы после jQuery replaceWith

Question

Оценка таможенной Директивы после jQuery replaceWith

У меня есть следующий код:

<div ng-app="myApp" ng-controller="AngularCtrl">
  Click here
</div>
<script>
 jQuery("#click_btn").click(function(){
  jQuery(this).replaceWith('Hello {{student.name}}<div my-repeater></div>');
 });
</script>

Here is my angular code:

var myApp = angular.module('myApp',[]);

myApp.directive('myRepeater', function() {
 return {
    restrict: 'A',        
    link: function(scope, element, attrs) {
        var myTemplate = "<div>{{rating}}</div>";
        for(var i=0;i


Here, whenever i click on the button, the element is just getting replaced and not evaluated. I tried with "angular.bootstrap(document);" after document is ready.
But that just evaluates the angular objects. But still the custom directive "my-repeater" is not getting evaluated. Any help on how can i get this done?








0


добавлено 28 Декабрь 2012 в 01:02

автор 
Sabarish Sankar

отредактировано 10 Июнь 2013 в 07:05


Просмотры: 4

источник

 nl
ja
de


2 ответы







Видеокурс "Создание приложений для Android"
Получи множество видеоуроков по Android сейчас






В первую очередь, я предполагаю, что это - тестовый код, так как угловой имеет ng-повторение, который соответствует вашим потребностям.
Есть несколько проблем с вашим кодом:
1) Вы не должны использовать  myTemplate.replace , но использовать $compile обслуживание. Введите обслуживание $compile в свою директиву (добавьте как функция param), и используйте его:
var text = $compile(myTemplate)(scope);

2) Пункты на диспетчере не будут доступным в вашей директиве. Добавьте его как стоимость к вашему признаку моего-ретранслятора:
<div my-repeater='{{items}}'>

In your directive you need to evaluate my-repeater:
var items = scope.$eval(attrs.myRepeater);

3) jQuery(this).replaceWith will not kickoff angular, since it it out of its scope. You need to do it manually by using scope.$apply. But is better to add the click event in the directive link function:
link: function(scope, element, attrs) {
        element.on('click', function() {   
           ...
           scope.$apply();
        });

Edit: Here is a working example.


2

добавлено 28 Декабрь 2012 в 01:22
автор asgoth



источник









I' ve отредактировал мой ответ. У этого есть рабочий пример также.

добавлено 28 Декабрь 2012 в 02:18, 
автор asgoth, 

источник




Shouldn' t быть проблемой. I' ve обновил пример. У этого были некоторые ошибки также, которые я удалил.

добавлено 28 Декабрь 2012 в 03:37, 
автор asgoth, 

источник




Я создал Скрипку JS того же самого. jsfiddle.net/JSWorld/br6e2/1 .Here после замены, угловые объекты не оценены.

добавлено 28 Декабрь 2012 в 01:44, 
автор Sabarish Sankar, 

источник




Спасибо Очень много asgoth! Но в моем сценарии, где я использую рельсы, я хочу заменить большим HTML, неравнодушным содержащий элементы со многими угловыми директивами и креплениями, объединенными с некоторыми материалами рельсов. таким образом, я должен буду использовать jQuery (этот) .replaceWith. Проблема - то, почему таможенного направляющего закрепления не происходит, когда мы говорим  angular.bootstrap (документ) . Ремешок ботинка будет только оценивать и не заботиться о таможенных креплениях и часах?

добавлено 28 Декабрь 2012 в 02:36, 
автор Sabarish Sankar, 

источник




Моя проблема состоит в том, как я могу оценить таможенную директиву? Можно ли, пожалуйста, помочь мне с этим? Когда я делаю  angular.bootstrap (документ)  весь ng - директивы оценены, но не таможенные директивы. Можно ли, пожалуйста, помочь мне с тем, как я мог оценить таможенную директиву?

добавлено 28 Декабрь 2012 в 03:02, 
автор Sabarish Sankar, 

источник




Спасибо Очень много asgoth! Действительно цените свою помощь!

добавлено 28 Декабрь 2012 в 04:02, 
автор Sabarish Sankar, 

источник











Видеокурс по Java для начинающих
Получи видеокурс по Java для начинающих с упражнениями






В первую очередь, я предполагаю, что это - тестовый код, так как угловой имеет ng-повторение, который соответствует вашим потребностям.
Есть несколько проблем с вашим кодом:
1) Вы не должны использовать  myTemplate.replace , но использовать $compile обслуживание. Введите обслуживание $compile в свою директиву (добавьте как функция param), и используйте его:
var text = $compile(myTemplate)(scope);

2) Пункты на диспетчере не будут доступным в вашей директиве. Добавьте его как стоимость к вашему признаку моего-ретранслятора:
<div my-repeater='{{items}}'>

In your directive you need to evaluate my-repeater:
var items = scope.$eval(attrs.myRepeater);

3) jQuery(this).replaceWith will not kickoff angular, since it it out of its scope. You need to do it manually by using scope.$apply. But is better to add the click event in the directive link function:
link: function(scope, element, attrs) {
        element.on('click', function() {   
           ...
           scope.$apply();
        });

Edit: Here is a working example.


2

добавлено 28 Декабрь 2012 в 01:22
автор asgoth



источник



I' ve отредактировал мой ответ. У этого есть рабочий пример также.

добавлено 28 Декабрь 2012 в 02:18, 
автор asgoth, 

источник




Shouldn' t быть проблемой. I' ve обновил пример. У этого были некоторые ошибки также, которые я удалил.

добавлено 28 Декабрь 2012 в 03:37, 
автор asgoth, 

источник




Я создал Скрипку JS того же самого. jsfiddle.net/JSWorld/br6e2/1 .Here после замены, угловые объекты не оценены.

добавлено 28 Декабрь 2012 в 01:44, 
автор Sabarish Sankar, 

источник




Спасибо Очень много asgoth! Но в моем сценарии, где я использую рельсы, я хочу заменить большим HTML, неравнодушным содержащий элементы со многими угловыми директивами и креплениями, объединенными с некоторыми материалами рельсов. таким образом, я должен буду использовать jQuery (этот) .replaceWith. Проблема - то, почему таможенного направляющего закрепления не происходит, когда мы говорим  angular.bootstrap (документ) . Ремешок ботинка будет только оценивать и не заботиться о таможенных креплениях и часах?

добавлено 28 Декабрь 2012 в 02:36, 
автор Sabarish Sankar, 

источник




Моя проблема состоит в том, как я могу оценить таможенную директиву? Можно ли, пожалуйста, помочь мне с этим? Когда я делаю  angular.bootstrap (документ)  весь ng - директивы оценены, но не таможенные директивы. Можно ли, пожалуйста, помочь мне с тем, как я мог оценить таможенную директиву?

добавлено 28 Декабрь 2012 в 03:02, 
автор Sabarish Sankar, 

источник




Спасибо Очень много asgoth! Действительно цените свою помощь!

добавлено 28 Декабрь 2012 в 04:02, 
автор Sabarish Sankar, 

источник

автор asgoth · Answer 1 · 2012-12-28T01:22Z

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

Есть несколько проблем с вашим кодом:

1) Вы не должны использовать myTemplate.replace , но использовать $compile обслуживание. Введите обслуживание $compile в свою директиву (добавьте как функция param), и используйте его:

var text = $compile(myTemplate)(scope);

2) Пункты на диспетчере не будут доступным в вашей директиве. Добавьте его как стоимость к вашему признаку моего-ретранслятора:

<div my-repeater='{{items}}'>

In your directive you need to evaluate my-repeater:

var items = scope.$eval(attrs.myRepeater);

3) jQuery(this).replaceWith will not kickoff angular, since it it out of its scope. You need to do it manually by using scope.$apply. But is better to add the click event in the directive link function:

link: function(scope, element, attrs) {
        element.on('click', function() {   
           ...
           scope.$apply();
        });

Edit: Here is a working example.

автор asgoth · Answer 2 · 2012-12-28T01:22Z