angular中控制器之间传递参数的方式

lauren_liuling 发布于2019-08-20 16:00 / 3395人阅读

摘要：在中，每个控制器都会有自己的，通过为这个对象添加属性赋值，就可以将数据传递给模板进行渲染，每个只会在自己控制器内起作用，而有时候需要用到其他控制器中的数据，这个时候就要考虑到控制器之间参数的传递了。向当前作用域下的子作用域发送一个事件。

在angular中，每个controller（控制器）都会有自己的$scope，通过为这个对象添加属性赋值，就可以将数据传递给模板进行渲染，每个$scope只会在自己控制器内起作用，而有时候需要用到其他控制器中的数据，这个时候就要考虑到控制器之间参数的传递了。

1.通过$rootscope传参

首先，在angular中存在作用域的继承，继承作用域符合 JavaScript 的原型继承机制，这意味着如果我们在子作用域中访问一个父作用域中定义的属性，JavaScript 首先在子作用域中寻找该属性，没找到再从原型链上的父作用域中寻找，如果还没找到会再往上一级原型链的父作用域寻找。在 AngularJS 中，作用域原型链的顶端是$rootScope，AnguarJS 将会寻找到$rootScope 为止，如果还是找不到，则会返回 undefined。

      
        
            {{name}}
            
            {{name}}
            
        
    
    var app=angular.module("app",[]);
    app.controller("parent", ["$scope",function ($scope) {
        $scope.name="hello";
    }]);
    app.controller("son", ["$scope",function ($scope) {
        console.log($scope.name);//hello
    }]);

在子控制器中打印name，但我们发现在这个控制器中并未为$scope添加name，于是向父作用域查找，发现父作用域存在该属性，所以可以打印出来。

$rootscope 是所有 $scope 的最上层对象,可以理解为一个 Angular 应用中的全局作用域对象。所以为$rootscope添加的属性，在所有的控制器中都可以访问得到。但是为它附加太多逻辑或者变量并不是一个好主意,和js全局污染是一样的.

2.通过事件的方式

首先介绍一下angular中的事件广播：

$on(name,handler) 注册一个事件处理函数，该函数在特定的事件被当前作用域收到（从父级或者子级作用域）时将被调用。

$emit(name,args) 向当前父作用域发送一个事件，直至根作用域。
$broadcast(name,args) 向当前作用域下的子作用域发送一个事件。
name表示事件名称，args表示事件传播的数据，handler表示在接受到传递时要执行的回调，该回调中有event参数，表示事件，有如下方法：

            event.targetScope 获取传播事件的作用域
            event.currentScope 获取接收事件的作用域
            event.name 传播的事件的名称
            event.stopPropagation() 阻止事件进行冒泡传播,仅在$emit事件中有效
            event.preventDefault() 阻止传播事件的发生  
            event.defaultPrevented 如果调用了preventDefault事件则返回true

1）子向父控制器传值

    
        
            {{name}}
            
            {{name}}
            
        
    
    var app=angular.module("app",[]);
    app.controller("parent", ["$scope",function ($scope) {
        $scope.$on("call", function(event,data){
            $scope.name=data;
            console.log(data);
        });
    }]);
    app.controller("son", ["$scope",function ($scope) {
        $scope.name="hello";
        $scope.$emit("call", $scope.name);
    }]);

2）父向子控制器传值

    var app=angular.module("app",[]);
    app.controller("parent", ["$scope",function ($scope) {
        $scope.name="hello";
        $scope.$broadcast("call", $scope.name);//传值
    }]);
    app.controller("son", ["$scope",function ($scope) {
        $scope.$on("call", function(event,data1){
            $scope.name1=data1;//接受值
            
        });
    }]);

注意：参数name相同时，父子控制器之间才可以传值

这种方式不可实现兄弟级传值，不过可以使用父级控制器作为中介，先由子控制器传值给父控制器，然后再由父控制器传递给另外的子控制器。

补充：之前遇到一个需求是，父控制器中，触发change事件后，获取数据传递给子控制，但是在子控制器只需要接受一次，发现可通过如下方式：

var scan=$scope.$on(name，handler)；scan();这样子控制器就只接受可一次，避免了多次接受带来的影响！

3.通过服务

在angular中服务是一个单例，所以在服务中生成一个对象，该对象就可以利用依赖注入的方式在所有的控制器中共享。
例：

    var app=angular.module("app",[]);
    app.controller("myCtrl", ["$scope","appService",function ($scope,appService) {
        appService.name="hi!!"
    }]);
    app.controller("myCtrl1", ["$scope", "appService",function ($scope,appService) {
        $scope.name=appService.name;
    }]);
    app.service("appService", [function(){
        this.name="hello";
    }]);

通过在appService这个服务中添加对象，然后在需要用到的控制器中，通过依赖注入的方式导入该服务，在myCtrl控制器中修改这个对象，在myCtrl1中也会得到修改过后的值。

云服务器 GPU云服务器 js中控制器 js的map参数传递 js之间传递数据 php 之间传递数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82647.html

AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0
vue中组件之间传递数据的方法

摘要：在父组件中，需要引用子组件的地方，传入数据。其实这种方法和中控制器之间传递数据的有点类似的。作用域在vue中，组件实例的作用域是孤立的，父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。下面几种方法可以实现组件之间数据的传递。通过prop传递数据 1）在子组件中，使用prop属性，显示的...

singerye 2019-08-20 18:19 评论0 收藏0
使用AngularJS构建应用时遇到的问题及解决方案（版本为1.3.9）

摘要：最近在公司使用用完成了一个项目，在此记录一下过程中遇到的问题及解决方案。其他两种方法可参考站内文章控制器如何通信结语以上为我在编写一个应用时遇到的问题及解决方案，记录并分享出来，欢迎大家指正最近在公司使用用AngularJS（1.3.9）完成了一个项目，在此记录一下过程中遇到的问题及解决方案。使用$http服务发送ajax请求时后端无法判断请求是XMLHttpRequest 问题...

cuieney 2019-08-19 17:25 评论0 收藏0
AngularJs

摘要：当左右服务都被解析并返回时，会以服务为参数去调用组件的构造函数。发送或广播的消息应该限定在最小的作用域。置顶一个通过，发送的消息列表并且窒息的管理以防止命名冲突在需要格式化数据时，将格式 angular 数据双向绑定的框架提供数据绑定，DOM指令。angular，定义了一套规则，开发中就必须遵守规则，这套规则为项目提供了一套解决方案。模块，组件，模板，元数据，数据绑定, 指令，服务...

sf190404 2019-08-19 18:44 评论0 收藏0