AngularJS-将HTML元素的范围更改为新范围

Question

我正在学习AngularJS，并做了一些怪异的实验，以了解有关scope ， directives和dom概念。

目的：将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并且不使用$timeout函数进行$compile ，那么我的视图dinnerbox期望的那样用dinnerbox更新
如果我创建new scope和$compile在$timeout功能，那么我的观点显示我的旧值即lunchbox然而铬控制台告诉我angular.element($0).scope().box显示我dinnerbox范围（$暂停执行后）。

我做错了什么？

Answer 1

调用$compile ， #grocery内容是lunchbox而不是{{ box }} 。 目前，已经链接了ng-controller指令，并且绑定信息无法作为纯HTML获得。

通过使用指令替代{{ }}绑定可以克服此缺点：

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

AngularJS-将HTML元素的范围更改为新范围

问题描述

1 个解决方案

解决方案1
0 2016-04-10 13:50:41

AngularJS-将HTML元素的范围更改为新范围

问题描述

1 个解决方案

解决方案1 0 2016-04-10 13:50:41

解决方案1
0 2016-04-10 13:50:41