AngularJS-将HTML元素的作用域更改为新的作用域

AngularJS - change scope of HTML element to new scope

本文关键字：作用域 元素 AngularJS- HTML      更新时间：2024-03-30

我正在学习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);
});

我的问题是：

  1. 如果我没有在$timeout函数中创建new scope和$compile，那么我的视图将按预期用dinnerbox更新
  2. 如果我在$timeout函数中创建new scope和$compile，那么我的视图会显示旧值，即lunchbox，而chrome控制台会显示angular.element($0).scope().box会显示作用域中的dinnerbox（在$timeout执行之后）

我做错了什么？

当调用$compile时，#grocery的内容是lunchbox而不是{{ box }}。此时ng-controller指令已经链接，绑定信息不能作为纯HTML使用。

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

<div id="grocery"><span ng-bind="box"></span></div>
相关文章：