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.controller("ctrl", function ($scope, $timeout) {
            $scope.name = "ABC";
            $timeout(function () {
                $scope.name = "XYZ";
                //console.log("ctrl :" + $scope.name);
            }, 2000);
        });
        app.directive("dir", function ($timeout) {
            return {
                restrict: "E",
                template: "<div>{{dirName}}</div>",
                link: function (scope, elem, attr) {
                    $timeout(function () {
                        //scope.name = "XYZ";
                        console.log("dir :" + scope.dirName);
                    }, 3000);
                },
                scope: {
                    dirName: "=myname"
                }
            }
        });
    </script>
</body>

以上 ^ : 一开始会显示ABC，2秒后会显示XYZ。*外面可以同步内部

        app.controller("ctrl", function ($scope, $timeout) {
            $scope.name = "ABC";
            $timeout(function () {
                //$scope.name = "XYZ";
                //console.log("ctrl :" + $scope.name);
            }, 2000);
        });
        app.directive("dir", function ($timeout) {
            return {
                restrict: "E",
                template: "<div>{{dirName}}</div>",
                link: function (scope, elem, attr) {
                    $timeout(function () {
                        scope.dirName = "XYZ";
                        console.log("dir :" + scope.dirName);
                    }, 3000);
                },
                scope: {
                    dirName: "=myname"
                }
            }
        });

以上^ : 开始显示ABC，3秒后显示XYZ。*内部可以同步外部

        app.controller("ctrl", function ($scope, $timeout) {
            $scope.name = "ABC";
            $timeout(function () {
                $scope.name = "XYZ";
                //console.log("ctrl :" + $scope.name);
            }, 2000);
        });
        app.directive("dir", function ($timeout) {
            return {
                restrict: "E",
                template: "<div>{{dirName}}</div>",
                link: function (scope, elem, attr) {
                    $timeout(function () {
                        //scope.dirName = "XYZ";
                        console.log("dir :" + scope.dirName);
                    }, 3000);
                },
                scope: {
                    dirName: "@myname"
                }
            }
        });

以上^ : 开始显示name，3秒后显示name。*内部的符号“@”只能拿到string

<body ng-app="app" ng-controller="ctrl">
    <dir myname="{{name}}"></dir>
    <script src="js/angular.js"></script>
    <script>
        var app = angular.module("app", []);
        app.controller("ctrl", function ($scope, $timeout) {
            $scope.name = "ABC";
            $timeout(function () {
                $scope.name = "XYZ";
                //console.log("ctrl :" + $scope.name);
            }, 2000);
        });
        app.directive("dir", function ($timeout) {
            return {
                restrict: "E",
                template: "<div>{{dirName}}</div>",
                link: function (scope, elem, attr) {
                    $timeout(function () {
                        //scope.dirName = "XYZ";
                        console.log("dir :" + scope.dirName);
                    }, 3000);
                },
                scope: {
                    dirName: "@myname"
                }
            }
        });
    </script>
</body>

以上 ^ : 一开始会显示ABC，2秒后会显示XYZ。*外面可以同步内部，同时注意div里是使用{{}}的表达式

        app.controller("ctrl", function ($scope, $timeout) {
            $scope.name = "ABC";
            $timeout(function () {
                //$scope.name = "XYZ";
                //console.log("ctrl :" + $scope.name);
            }, 2000);
        });
        app.directive("dir", function ($timeout) {
            return {
                restrict: "E",
                template: "<div>{{dirName}}</div>",
                link: function (scope, elem, attr) {
                    $timeout(function () {
                        scope.dirName = "XYZ";
                        console.log("dir :" + scope.dirName);
                    }, 3000);
                },
                scope: {
                    dirName: "@myname"
                }
            }
        });

以上 ^ : 一开始会显示ABC，2秒后会显示XYZ。*内面可以同步外部，同时注意div里是使用{{}}的表达式

时间： 2024-10-08 16:52:29

angular : direative : scope | 指令scope里的符号@，=的相关文章

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> angul

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

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

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

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

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 ($

AngularJS 全局scope与指令 scope通信

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

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

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

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——内置指令

内置指令 ng-app 指定应用根元素,至少有一个元素指定了此属性. ng-controller 指定控制器 ng-show控制元素是否显示,true显示.false不显示 ng-hide控制元素是否隐藏,true隐藏.false不隐藏 ng-if控制元素是否"存在",true存在.false不存在 ng-src增强图片路径 ng-href增强地址 ng-class控制类名 ng-include引入模板 ng-disabled表单禁用 ng-readonly表单只读 ng-checke

angular : direative ：通讯

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