[angular]指令之1scope

最新推荐文章于 2018-06-05 22:57:59 发布

灵眼儿上方

最新推荐文章于 2018-06-05 22:57:59 发布

阅读量557

点赞数

分类专栏： java相关文章标签： angular 指令 scope

本文链接：https://blog.csdn.net/liyanq528/article/details/53767099

版权

java相关专栏收录该内容

25 篇文章 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;
});