控制器controller与指令中的link、controller中同名变量作用域的关系

 

  angularjs中的作用域与原生js中的函数嵌套原理一致,都是存在作用域的继承。若在子控制器(同样包括在指令中的link或是controllerding中定义变量,此时指令中必须未使用scope独立作用域)未定义相关变量,那么它会向父控制器一层层查找,直到找到位为止。

若在自定义指令中的link、controller与该指令的父控制器定义了同名变量,那它的作用域是如何的呢,以及指令中的独立作用域scope会对改变量产生怎样的影响,以例说明:

HTML:

<div ng-controller="test">    <div>模块下控制器:{{param}}</div>    <dir-scope></dir-scope></div>

js:

   var myApp=angular.module("myApp",[]);
    myApp.controller("test",["$scope",function($scope){
        $scope.param="moudelController-param";
    }]);
    myApp.directive("dirScope",function(){
        return{
            restrict:"AE",
            scope:{
                param:"@"
            },
            template:"<div>{{param}}</div>",
            replace:true,
            controller:function($scope,$element,$attrs){
                $scope.param="dirController-param";
            },
            link:function(scope,ele,attrs){
                console.log("link param:" + scope.param);
                ele.bind("click",function(){
                    scope.param="link-param";
                    scope.$apply();
                    console.log("link click param:" + scope.param);
                })
            }
        }
    })

(一)使用独立作用域scope的情况

初次运行结果:

  页面:

  

  控制台:

  

在页面中,模块下控制器与指令中显示的不同,说明模块下控制器中的param与指令中的param互为独立的(可以理解为两个不同的变量,因为当指令中使用独立作用域scope时,若在指令中未定义该变量则不会向父控制器查找同名变量)。然而在控制台输出了在指令中link阶段param的值为 dirController-param,说明指令中的link、controller使用的为同一变量,当点击页面中的“dirController-param”会触发在指令link阶段定义的click事件,触发结果也说明了模块下控制器中的变量与指令中的同名变量互为独立的,已下为触发结果:

  页面:

  

  控制台:

  

(二)未使用使用独立作用域scope的情况

将以上代码中的scope:{param:"@"}注释掉,结果如下:

  页面:

  

  控制台:

  

程序是按照控制器->指令中的link->指令中的controller 的顺序来运行的,在指令的controller中对param赋的值覆盖了模块下的控制器对param赋的值,在指令中的link阶段同样输出的是“dirController-param”,说明模块下的controller与指令的controller、link中定义的同名变量为同一变量。点击页面中的“dirController-param”触发的变化同样说明了这个问题,一下为点击“dirController-param”后的界面:

  页面:

  

  控制台:

  

时间: 2024-10-12 17:41:31

控制器controller与指令中的link、controller中同名变量作用域的关系的相关文章

controller 和 指令 通讯方法

在 angular 中我们经常会使用多个 controller 和 指令 他们拥有各自的 $scope , 这就产生了跨$scope调用的问题. 有几种常见的方法来可以使用. 方法一 : 指令 require <div directive1="xx"> <div directive2></div> </div> directive("directive1", [function () { return { restri

angular学习笔记(三十)-指令(10)-require和controller

本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv

SpringBoot中常用注解@Controller/@RestController/@RequestMapping的区别

@Controller 处理http请求 @Controller //@ResponseBody public class HelloController { @RequestMapping(value="/hello",method= RequestMethod.GET) public String sayHello(){ return "hello"; } } 如果直接使用@Controller这个注解,当运行该SpringBoot项目后,在浏览器中输入:loc

Spring中@Resource、@controller注解的含义

@Resource 注解被用来激活一个命名资源(named resource)的依赖注入,在JavaEE应用程序中,该注解被典型地转换为绑定于JNDI context中的一个对象. Spring确实支持使用@Resource通过JNDI lookup来解析对象,默认地,拥有与@Resource注解所提供名字相匹配的"bean name(bean名字)"的Spring管理对象会被注入. 在下面的例子中,Spring会向加了注解的setter方法传递bean名为"dataSour

spring MVC 管理HttpClient---实现在java中直接向Controller发送请求

在spring MVC中,大多数时候是由客户端的页面通过ajax等方式向controller发送请求,但有时候需要在java代码中直接向controller发送请求,这时可以使用HttpCilent实现. 首先用到的包是httpclient-4.3.5.jar和httpcore-4.3.2.jar 先看下面代码: package module.system.common; import java.io.IOException; import java.util.ArrayList; import

springmvc中针对一个controller方法配置两个url请求

springmvc中针对一个controller方法配置两个url请求 标签: spring mvc孙琛斌 2015-12-10 17:10 2189人阅读 评论(0) 收藏 举报  分类: Spring(8)  版权声明:本文为博主原创文章,未经博主允许不得转载. 记录一个小知识点. 某些应用场景>..你可能需要不同的url请求得到相同的结果,那么你写两个方法总是不太好的,使用下面的方法可以解决这个问题. @RequestMapping(value = { "/item/index.ht

Spring中@Component注解,@Controller注解详解(网摘)

在使用Spring的过程中,为了避免大量使用Bean注入的Xml配置文件,我们会采用Spring提供的自动扫描注入的方式, 只需要添加几行自动注入的的配置,便可以完成Service层,Controller层等等的注入配置. 使用过程中,在Service层中的实现类头上加@Compopnet注解,在Controller类头加@Controller注解,便完成了配置. 例如 在Controller中当我们调用某个Service时就不需要Set方法了,直接通过@Autowried 注解对Service

SpringMVC从Controller跳转到另一个Controller

1. 需求背景 需求:spring MVC框架controller间跳转,需重定向.有几种情况:不带参数跳转,带参数拼接url形式跳转,带参数不拼接参数跳转,页面也能显示. 本来以为挺简单的一件事情,并且个人认为比较常用的一种方式,一百度全都有了,这些根本不是问题,但是一百度居然出乎我的意料,一堆都不是我想要的结果.无奈啊,自己写一篇比较全都供以后大家一百度吧,哈哈哈...是这些写的不是很全都人们给了我写这篇博客的动力. 2. 解决办法 需求有了肯定是解决办法了,一一解决,说明下spring的跳

0521.如何拆分View Controller进而实现轻量级的View Controller[UIKit]

参考文章来自objcio网站 为什么要编写轻量级的View Controller?? 1.作为iOS项目中最大的文件,ViewControllers中的代码复用率几乎是最低的 2.重量级的View COntroller加大了测试的复杂度. 所以关注ViewController的瘦身,把业务逻辑.网络请求.Views的代码移到合适的地方,进而提高代码可读性.降低耦合.提高复用.降低测试难度极为重要 一.把DataSource和其他Protocols分离出来 比如uiTableView中的DataS