[angular]指令之1scope

来源：互联网发布：淘宝判断虚假交易编辑：程序博客网时间：2024/05/02 02:32

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

指令是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;});

0 0