angularJs1.x学习——指令（directive）之scope

where_slr

于 2018-07-13 17:08:30 发布

阅读量1.3k

点赞数

分类专栏： angularJS1.x Javascript 学习笔记文章标签： angular指令

本文链接：https://blog.csdn.net/where_slr/article/details/81034462

版权

学习笔记同时被 3 个专栏收录

44 篇文章 1 订阅

订阅专栏

Javascript

35 篇文章 0 订阅

订阅专栏

angularJS1.x

1 篇文章 0 订阅

订阅专栏

scope 指令的作用域

可选，默认是false
false: 使用父作用域，指令中对属性的修改，会直接作用到父级作用域中
true: 从父作用域继承，并创建一个新的作用域对象，指令中可以访问父级的作用域，修改不会影响到父级
{}: 创建一个隔离作用域，不能访问父级的作用域，修改也不会影响到父级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scope</title>
    <link type="text/css" rel="stylesheet" href="">
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='MainController'>
    父亲: {{name}}
    <input ng-model="name" />
    <div my-directive></div>
    <br />
    <input type="text" ng-model="color" placeholder="Enter a color"/>
    <hello-world></hello-world>
</div>
<script>
    angular.module('myApp',[])
        .controller('MainController',['$scope',function ($scope) {
            $scope.name='哈士奇'
        }])
        .directive('myDirective',function () {
            return {
                restrict:'EA',
                scope:false,
                //儿子继承父亲的值，改变父亲的值，儿子的值也随之变化，反之亦如此。（继承不隔离）
                /*scope:true,*/
                //儿子继承父亲的值，改变父亲的值，儿子的值随之变化，但是改变儿子的值，父亲的值不变。（继承隔离）
                /*scope:{},*/
                //没有继承父亲的值，所以儿子的值为空，改变任何一方的值均不能影响另一方的值。（不继承隔离）
                template:'<div>儿子:{{ name }}<input ng-model="name"/></div>'
            }
        })
        .directive('helloWorld',function () {
            return{
                restrict:'EA',
                replace:true,
                template:'<p style="background-color:{{color}}">Hello World</p>'
            }
        })
</script>
</body>
</html>

隔离作用域的绑定策略

@： 本地作用域属性 ，使用@符号将子级作用域同DOM属性的值进行绑定。子级作用域可以
    使用父级作用域的变量，但内部作用域的变量改变，不会影响外部作用域的绑定变量， 
    即单向绑定。   ***注意绑定的方式{{变量}}***
=： 双向绑定：通过=可以将子级作用域上的属性同父级作用域上的属性进行双向的数据绑定。
    就像普通的数据绑定一样，子级作用域上会属性变量变化会引起父级作用域上数据模型中的改变，
    即双向绑定。 ***注意绑定的方式{{变量}}***
& 与父级的方法绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scope</title>
    <link type="text/css" rel="stylesheet" href="">

</head>
<body ng-app="myApp">
<div>
    <input type="text" ng-model="color1" placeholder="Enter a color1"/>
    <hello-world1 color-attr='{{color1}}'></hello-world1>
    <!--注意这里设置了color-attr属性，{{color}}-->
    这是'@'绑定:    {{color1}}
    <br />
    <br />
    <br />
    <input type="text" ng-model='color' placeholder="Enter a color2"/>
    <hello-world2 color-attr='color2'></hello-world2>
    <!--注意这里设置了color-attr属性，color2-->
    这是'='绑定:    {{color2}}
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.directive('helloWorld1', function () {
        return {
            restrict: 'EA',
            replace: true,
            scope: {
                color1: '@colorAttr' 
                //指明了隔离作用域中的属性color1应该绑定到属性colorAttr
                //单向绑定
            },
            template: '<input type="text" ng-model="color1"></div></div>'
        }
    });
    app.directive('helloWorld2', function () {
        return {
            restrict: 'EA',
            replace: true,
            scope: {
                color2: '=colorAttr' 
                //指明了隔离作用域中的属性color2应该绑定到属性colorAttr
                //双向绑定
            },
            template: '<div style="background-color:{{color2}}">Hello World<div>
            <input type="text" ng-model="color2"></div></div>'
        }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scope</title>
    <link type="text/css" rel="stylesheet" href="">

</head>
<body ng-app="myApp">
<div ng-controller='MainController'>
    <input type="text" ng-model="name" placeholder="Enter a color"/>
    {{name}}
    <hello-world saysomething999="say();" name="AAA"></hello-world> //注意这里
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
    var app = angular.module('myApp',[]);
    app.controller('MainController',function($scope){
        $scope.say = function(){
            alert('hello');
        };
        $scope.name = 'leifeng';
    });
    app.directive('helloWorld',function(){
        return {
            scope:{
                saysomething:'&saysomething999',//绑定父级的方法
                name:'@'//单向0绑定父级的name
            },
            restrict: 'AE',
            replace: true,
            template: '<button type="button" ng-bind="name" ng-init="saysomething();"></button>'
        }
    });
</script>
</body>
</html>

where_slr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJs1.x学习——指令（directive）之scope

scope 指令的作用域可选，默认是false false: 使用父作用域，指令中对属性的修改，会直接作用到父级作用域中 true: 从父作用域继承，并创建一个新的作用域对象，指令中可以访问父级的作用域，修改不会影响到父级 {}: 创建一个隔离作用域，不能访问父级的作用域，修改也不会影响到父级&lt;!DOCTYPE html&gt;&lt;html lang="...
复制链接

扫一扫