Wscats/angular-tutorial

directive组件作用域

Wscats opened this issue · 2 comments

Wscats commented
  • false，继承父作用域（默认值），父能影响子，子也能影响父;
  • true，继承父作用域，并且创建自己的作用域（子作用域），父能影响子，子不能影响父;
  • {}，创建一个全新的隔离作用域，父子互不影响；
    这里写图片描述
<!DOCTYPE html>
<html ng-app="wsscat">

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/angular.js"></script>

    <body>
        <article ng-controller="indexCtrl">
            <p>父作用域：</p>
            <input ng-model="name" />
            <section>
                <p>组件作用域：</p>
                <wsscat></wsscat>
                <wsscat1></wsscat1>
                <wsscat2></wsscat2>
            </section>
        </article>
    </body>
    <script>
        var app = angular.module('wsscat', []);
        app.controller('indexCtrl', function($scope) {
            $scope.name = 'wsscat';
        })

        app.directive('wsscat', function() {
            return {
                restrict: "EAMC",
                template: "<p>双向数据绑定<br /><input ng-model='name' /></p>",
                scope: false
            }
        })
        app.directive('wsscat1', function() {
            return {
                restrict: "EAMC",
                template: "<p>父影响子，子不能影响父<br /><input ng-model='name' /></p>",
                scope: true
            }
        })
        app.directive('wsscat2', function() {
            return {
                restrict: "EAMC",
                template: "<p>互不影响<br /><input ng-model='name' /></p>",
                scope: {}
            }
        })
    </script>
    <style>
        article{
            border: 1px solid #009689;
        }
        section{
            border: 1px solid #22FFFF;
        }
    </style>
</html>
Wscats commented

html
**=**双向数据绑定，注意此时name属性值的变量要带{{}}
<wsscat2 name="{{name}}"></wsscat2>
js

scope: {
        name:"="
        },

html
**@**当方向影响，父能影响子，但子不能影响父
<wsscat2 name="name"></wsscat2>

scope: {
        name:"@"
},

一定要把绑定的值放在属性上面作为媒介
属性值不能设置为如data-name的data-前缀的值
如果是设置为abc-name等格式
组件里面scope属性传递的对象，里面的name属性值要遵守驼峰的写法

scope: {
        name:"@abcName"
},