Question

我正在学习AngularJS，并通过关于scope，directives和dom的概念进行一些奇怪的实验。

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但是chrome控制台显示我angular.element($0).scope().box告诉我{范围内的{1}}（在$ timeout执行之后）。

我做错了什么？

Answer 1

在调用$compile时，#grocery内容为lunchbox而非{{ box }}。此时ng-controller指令已经链接，绑定信息不能以纯HTML形式提供。

使用指令替换{{ }}绑定可以克服这个缺点：

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

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

1 个答案: