angular : direative : scope 指令scope和transclude的关系

今天记入的是指令的scope和transclude关系

a 和 b 都是指令

<div a>

  <div b></div>

</div>

a transclude了b,b的$$prevSibling是a,而a的$$prevSibling不是b

<div a>
    <div ng-transclude="">
        <div b></div>
    </div>
</div>
angular.module("Member", []).
            directive("a", [function () {
                return {
                    restrict: "A",
                    transclude : true,
                    template :"<div ng-transclude></div>",
                    link: function ($scope) {
                        console.log("a");
                        console.log($scope);
                    },
                    scope : true,
                }
            }]).
            directive("b", [function () {
                return {
                    restrict: "A",
                    link: function ($scope) {
                        console.log("b");
                        console.log($scope);
                    }
                }
            }])

问题来了:为什么使用ng-transclude会自动创建一个新的scope?而且是sibling?那我不会回答,但是如果我要继承指令a的scope该怎么办?

解决方案:https://github.com/angular/angular.js/issues/1809

angular.module("my").directive(‘myTransclude‘, function() {
    return {
        compile: function(tElement, tAttrs, transclude) {
            return function(scope, iElement, iAttrs) {
                transclude(scope.$new(), function(clone) {
                    iElement.append(clone);
                });
            };
        }
    };
});

那原本的ng-transclude替换成my-transclude就能解决sibling问题。

如果你需要指令b的scope不是自己的,你可以删除掉$new()

如果你需要指令a是隔离的,同时指令b的scope要是rootscope,你就用回ng-transclude吧~

 
时间: 2024-10-23 01:13:57

angular : direative : scope 指令scope和transclude的关系的相关文章

angular : direative : scope | 指令scope里的符号@,=

先看看以下的代码 <body ng-app="app" ng-controller="ctrl"> <dir myname="name"></dir> <script src="js/angular.js"></script> <script> var app = angular.module("app", []); app.contr

angular自定义指令scope属性学习笔记

指令在angular项目中的应用非常频繁,当它自带的指令不能满足我们的需求时,我们就需要自定义指令: 在angular,作用域是一个很重要的概念.同样的,要定义一个指令,我们也需要设置他的sope: angular为自定义指令提供了三种scope:①不创建独立的作用域,直接使用父作用域(false):②创建一个继承自它的父级作用域的独立作用域(true):③创建一个完全与外部隔离的作用域({}):

AngularJS入门心得4——死磕指令scope

上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与scope有关,可以看做是<AngularJS入门心得1——directive和controller如何通信>在scope上的补充和延伸. 小时候,老师就教会了我们盲人摸象这个成语,教导我们认识事物不能片面,缺少对于一个事物全局的认知.所以,说到指令,它的一个完整结构如下: angular.mod

AngularJS 全局scope与指令 scope通信

在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地scope的使用做一个总结. 一.scope作用域 1.AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独立的"Isolate"作用域,它也

Angular.js 学习二---$scope和$rootScope,Angular模块的run方法,依赖注入中代码压缩

一.$scope和$rootScope的区别 一句话总结: $rootScope针对全局的作用域生效 $scope只针对当前的controller作用域生效 二.AngularJS模块的run方法 run方法初始化全局的数据,只对全局作用域起作用 如$rootScope <script type="text/javascript"> var m1 = angular.module('myApp', []); m1.run(['$rootScope', function ($

angular的自定义指令---详解

1.angualr指令 在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的指令也是基于下面所用到的步骤来创建的,只不过他都添加到了全局中,所以可以直接使用: 2.创建自定义指令 首先创建模块app,再使用app的服务directive方法, 创建指令内容第一个参数自定义的名字,第二个参数是自定义参数属性对象,该对象包括的属性基本在代码注释解释清楚: // a.创建模块 v

angular : direative :通讯

在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个name · 建立一个factory,让需要通讯的指令依赖注入factory服务 以上都可以解决通讯问题,但是在不同的状况下还是会遇到代码阅读上的问题 今天遇到的问题是当指令A的child的指令B要和指令A通讯,同时指令C(不在指令A的child)要和指令A通讯 最终决定使用$on和$boardcast

Angular内置指令(二)

目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,ng-bind-template,ng-change,ng-submit,ng-cloak,ng-bind 详细介绍: $rootScope 是作用域链的起始点,任何嵌套在ng-app内的指令都会继承$rootScope ng-app 任何具有ng-app属性的dom元素都将被标记为$rootScop

解决Angular的递归指令问题

半夜三更睡不着,记录一下昨天工作遇到的问题. 出于项目的需要,写了一个递归的指令.这东西居然导致chrome假死.看起来好严重,连强制退出都不行了,害我重启电脑. 简单介绍一下背景: 首先是有一个树状的数据结构,大约是这样子: { id:xx, children:{ id:yy, children:{...} } } 想在页面显示这个数据,一般的思路就是写一个指令嘛,模版大约是这个样子的( 假设指令的名字就是nodeDirective): <div> <label>{{node.i