[angular]指令之1scope
一个多月没写了，懒了。。。
指令是angular重要部分，而scope是指令的重要内容，看一指令先得看它怎么实现的。我总结了scope的基本含义，带"?"的实验了没效果，暂时没弄明白呢。
测试Directive的Scope
controller的message字段
内容1:默认的scope,值是false,指令中的变量随父scope字段变量改变
我是默认的scope 内容2:scope为true,指令有独立作用域,独立作用域里面找不到才找父作用域
scope值为true 内容3:scope为obj,字段为"=",写法[msg = "message"]
scope值obj,equal类型 内容4:scope为obj,字段为"@",写法[msg = "{/{message}}"]没有"/"
scope值obj,equal类型 内容4:scope为obj,字段为"&",写法[msg = "andFun()"]
scope值obj,equal类型
js
/*** 由于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 = "通过父scope的到的信息:{{message}}";return dir;
}).directive("testTrue", function () {return {restrict: "E",template: "{{message}}" +"",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 = "通过父scope的到的信息:{{msg}}" +"";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 = "通过父scope的到的信息:{{msg}}" +"";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 = "通过父scope的到的信息:{{msgResult}}" +"" +"";dir.link = function (scope, elem, attr) {scope.getParentMsg = function () {scope.msgResult = scope.msg({paramStr:scope.param});}};return dir;
});
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！