[angular]指令之1scope

痛定思痛。 2022-07-13 02:20 181阅读 0赞

一个多月没写了，懒了。。。

指令是angular重要部分，而scope是指令的重要内容，看一指令先得看它怎么实现的。我总结了scope的基本含义，带"?"的实验了没效果，暂时没弄明白呢。

<!DOCTYPE html>
    <html lang="en" ng-app="appScopeTest">
    <head>
        <meta charset="UTF-8">
        <title>测试Directive的Scope</title>
        <script src="frameWork/angular.js"></script>
        <script SRC="js/testDirectiveScope.js"></script>
    </head>
    <body ng-controller="testScopeController">
    
    <h3>controller的message字段</h3>
    <input ng-model="message" style="width: 200px">
    
    <h3>内容1:默认的scope,值是false,指令中的变量随父scope字段变量改变</h3>
    <test-def>我是默认的scope</test-def>
    
    <h3>内容2:scope为true,指令有独立作用域,独立作用域里面找不到才找父作用域</h3>
    <test-true>scope值为true</test-true>
    
    <h3>内容3:scope为obj,字段为"=",写法[msg = "message"]</h3>
    <test-obj-equal msg = "message">scope值obj,equal类型</test-obj-equal>
    
    <h3>内容4:scope为obj,字段为"@",写法[msg = "{/{message}}"]没有"/"</h3>
    <test-obj-ai-te msg = "{
       {message}}">scope值obj,equal类型</test-obj-ai-te>
    
    <h3>内容4:scope为obj,字段为"&",写法[msg = "andFun()"]</h3>
    <test-obj-and msg = "and(paramStr)">scope值obj,equal类型</test-obj-and>
    </body>
    </html>

/**
     * 由于directive在angular中的地位之重，所以得认真对待。但理解难啊，所以决定逐个属性进行实例分析
     * directive实例分析第一篇：scope
     * Created by liyanq on 16/12/19.
     */
    
    /**
     * 1，scope有三个取值,true,false,{}。默认false。false就是共享父作用域的属性，指令的作用域非独立。如testDef
     * 2，scope当为true的时候，优先级是directive的scope->父scope。可以理解继承关系，子类覆盖父类，没有直接用父类。
     * 3，scope为对象，字段属于"="类型
     *   和true的初始状态不同，不读父scope，只能通过组件的属性方式传值，属于地址传递。
     *   如果directive-link的scope有值，将覆盖父scope的值(这个挺危险的～)
     *   如果directive的scope变化，将覆盖父scope的值(这个挺危险的～)
     *   directive的scope的字段值随父scope变化
     * 4，scope为对象，字段属于"@"类型
     *   和true的初始状态不同，不读父scope，只能通过组件的属性方式传值，属于值传递。
     *   如果directive-link的scope有值，将被父scope的值覆盖(这个挺安全的～)
     *   如果directive的scope变化，不覆盖父scope的值(这个挺安全的～)
     *   directive的scope的字段值随父scope变化
     * 5，scope为对象，字段属于"&"类型
     *   这个简单，类似函数指针，属于地址传递，能透过这个执行父scope的方法。
     * */
    var appScope = angular.module("appScopeTest", []);
    //通知scope更新
    appScope.controller("testScopeController", function ($scope) {
        $scope.message = "来自controller－scope的信息";
        $scope.and = function (paramStr) {
            return "andFun()函数返回值" + paramStr;
        };
    }).directive("testDef", function () {
        var dir = {};
        dir.restrict = "E";
        dir.scope = false;//默认的，写不写都行
        dir.template = "<div>通过父scope的到的信息:{
       {message}}</div>";
        return dir;
    }).directive("testTrue", function () {
        return {
            restrict: "E",
            template: "<div>{
       {message}}</div>" +
            "<button ng-click='changeMsg()'>改变directive-scope中message值</button>",
            scope: true,
            link: function (scope, elem, attr) {
                scope.message = "来自directive－scope的信息";
                scope.changeMsg = function () {
                    scope.message = "改变后的directive－scope的信息";
                }
            }
        };
    }).directive("testObjEqual", function () {
        var dir = {};
        dir.restrict = "E";
        dir.scope = {msg: "="};//换个名称，省的乱
        dir.template = "<div>通过父scope的到的信息:{
       {msg}}</div>" +
            "<button ng-click='changeMsg()'>改变directive-scope中message值</button>";
        dir.link = function (scope, elem, attr) {
            // scope.msg="来自testObjEqual－scope的信息";//会覆盖controller的scope值
            scope.changeMsg = function () {
                scope.msg = "ObjEqual改变后的directive－scope的信息";//会覆盖controller的scope值
            }
        };
        return dir;
    }).directive("testObjAiTe", function () {
        var dir = {};
        dir.restrict = "E";
        dir.scope = {msg: "@"};//换个名称，省的乱
        dir.template = "<div>通过父scope的到的信息:{
       {msg}}</div>" +
            "<button ng-click='changeMsg()'>改变directive-scope中message值</button>";
        dir.link = function (scope, elem, attr) {
            scope.msg = "来自testObjAiTe－scope的信息";//不会覆盖controller的scope值,也不会覆盖指令的值
            scope.changeMsg = function () {
                scope.msg = "testObjAiTe改变后的directive－scope的信息";//不会覆盖controller的scope值
            }
        };
        return dir;
    }).directive("testObjAnd", function () {
        var dir = {};
        dir.restrict = "E";
        dir.scope = {msg: "&"};//换个名称，省的乱
        dir.template = "<div>通过父scope的到的信息:{
       {msgResult}}</div>" +
            "<button ng-click='getParentMsg()'>点我执行父scope函数</button>" +
            "<input type='text' ng-model='param'>";
        dir.link = function (scope, elem, attr) {
            scope.getParentMsg = function () {
                scope.msgResult = scope.msg({paramStr:scope.param});
            }
        };
        return dir;
    });