AngularJS - изменить область действия HTML-элемента на новую область.

Я изучаю AngularJS и делаю некоторые безумные эксперименты, чтобы очистить понятия о scope, directives и dom.AngularJS - изменить область действия HTML-элемента на новую область.

AIM: Изменить сферу HTML элемента <div id="grocery"> вновь созданный дочерний объем»

index.html

<html ng-app="eggly" ng-controller="rootCtrl"> 
    <body> 
    <div id="grocery"> 
     {{box}} 
    </div> 

    </body> 
</html>

rootCtrl

eggly.controller('rootCtrl',function($scope,$timeout,$compile){ 

    $scope.box = "lunchbox"; --> first assign box = lunchbox 
    $timeout(function(){ 

     //delete $scope; 
     var newScope = $scope.$new(); --> create a new scope 
     newScope.box = "dinnerbox"; ---> Assign new value 
     $compile($('#grocery'))(newScope); --> compile div with new scope 
     //newScope.$apply(); --> I think $timeout already do $apply so commented out 

    },1000); 

});

Мой вопрос :

Если я не создаю new scope и не $compile в $timeout функции, то на мой взгляд обновляется с dinnerbox, как я ожидал
Если я создаю new scope и $compile в $timeout функции, то на мой взгляд показывает мне старое значение ИЭ lunchbox но хром консоль показать мне angular.element($0).scope().box показывает мне dinnerbox в области (после $ timeout исполнения).

Что я делаю неправильно?

источник

2016-04-10 voila

Ничего этого не принадлежит в контроллере, в первую очередь. Также вы не используете '$ compile' для объекта jQuery. То, что вы пытаетесь сделать, это создать директиву бедного человека и использовать для этого настоящую угловую директиву. – charlietfl

@charlietfl: Помимо того, что вы прокомментировали, единственное, что я ожидаю от вас, знаете ли вы, почему он не работает? Спасибо – voila

@charlietfl: с компиляцией $ либо вы можете использовать angular.element объекта jquery. AFAIK – voila

Когда $compile вызывается, #grocery содержание lunchbox и не {{ box }}. В данный момент директива ng-controller уже была связана, и обязательная информация недоступна в виде простого HTML.

Этот недостаток может быть преодолен с помощью заменителя директивы для связывания {{ }}:

<div id="grocery"><span ng-bind="box"></span></div>

источник

2016-04-10 13:50:41 estus

Это одна из многочисленных вещей, которые можно отнести к выражению «не использовать jQuery with Angular». Проблема заключается не в jQuery, а в уровне профессионализма, который требуется для того, чтобы разбить угловой рекомендуемый рабочий процесс, но заставить его работать плавно. На этом уровне разработчик обычно понимает, что 98% знакомых случаев использования jQuery являются антипаттернами в Angular. – estus

AngularJS - изменить область действия HTML-элемента на новую область.

ответ

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