浅谈Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家介绍一下Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

【相关推荐：《angular教程》】

在angular的使用过程中我们经常用$rootScope.$new()为elem创建一个新的作用域scope，然后使用$compile(elem)(scope)编译这个含有指令的元素。那么这里传进去的scope到底是哪里的作用域？scope.$$childHead是什么作用域？编译好的elem.scope()返回的又是什么作用域？elem.isolateScope()返回的是什么作用域？知道这些是很有必要的，特别是使用jasmine测试angular指令的时候。下面使用一个例子来验证一下。

index.html

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="utf-8">
    <title>angular test</title>
</head>
<body ng-controller="myCtrl">
     
</body>
<script src="./node_modules/angular/angular.js"></script>
<script src="./index.js"></script>
</html>

index.js

var app = angular.module('myapp',[]);
app.controller('myCtrl', function($compile, $rootScope){
    //创建一个新的作用域，并添加两个属性
    var scope_0 = $rootScope.$new();
    scope_0.color = "red";
    scope_0.name = "Jhon";
 
    //编译该指令并插入body中
    var elem = angular.element('<p mcolor="{{color}}">你好吗？</p>');
    $compile(elem)(scope_0);
    var body = document.querySelector('body');
    angular.element(body).append(elem)
 
    //获取这几个作用域
    var scope_1 = elem.scope();
    var scope_2 = elem.isolateScope();
    var scope_3 = scope_0.$$childHead;
    //并打印
    console.log("scope_0:", scope_0);
    console.log("scope_1:", scope_1);
    console.log("scope_2:", scope_2);
    console.log("scope_3:", scope_3);
});
app.directive('mcolor',function(){
    return {
        restrict: 'A',
        scope:{
            mcolor: '@'
        },
        link: function(scope, elem, attrs){
            elem.css('color', scope.mcolor);
        }
    }
});

执行后的结果是，界面显示了红色的“你好吗？”，当然这不是我们所关注的。下面我们来看一下打印的日志：

scope_0: 
  color:"red"
  name:"Jhon"
 
scope_1:
  color:"red"
  name:"Jhon"
 
scope_2:
  mcolor:"red"
 
scope_3: 
  mcolor:"red"

由此我们可以得出以下结论：

$compile(elem)(scope),这里的scope是指令的外围作用域。
elem.scope()返回的scope是指令的外围作用域。
elem.isolateScope()返回的才是指令的独立作用域。
scope.$$childHead返回的也是指令的独立作用域。

更多编程相关知识，请访问：编程教学！！

以上就是浅谈Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 浅谈Angular中elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别

相关推荐

评论