乐山网站建设

专注高端品牌网站建设行业优质供应商！认准小谭建站！
028-86922220135-1821-9792
  • 首页
  • 网站建设
    网站设计包含服务 网站制作流程 有效沟通方式 售后服务
  • 微信开发
  • 案例展示
    乐山小谭建站公司作品案例展示
  • 新闻资讯
  • 解决方案
  • 小谭建站
  • 联系我们

    • angular中如何实现控制器之间传递参数

    这篇文章将为大家详细讲解有关angular中如何实现控制器之间传递参数，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

    创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的新平网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

    在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参数，表示事件，有如下方法：

    1. event.targetScope 获取传播事件的作用域

    2. event.currentScope 获取接收事件的作用域

    3. event.name 传播的事件的名称

    4. event.stopPropagation() 阻止事件进行冒泡传播,仅在$emit事件中有效

    5. event.preventDefault() 阻止传播事件的发生  

    6. 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中也会得到修改过后的值。

    关于“angular中如何实现控制器之间传递参数”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


    新闻名称：angular中如何实现控制器之间传递参数
    标题链接：http://lszwz.com/article/iecogp.html

    其他资讯

    售后响应及时

    7×24小时客服热线

    数据备份

    更安全、更高效、更稳定

    价格公道精准

    项目经理精准报价不弄虚作假

    合作无风险

    重合同讲信誉，无效全额退款

    联系我们

    TEL

    135-1821-9792

    028-86922220

    地址：乐山市太升南路288号锦天国际

    快捷导航

    Shortcut

    二维码

    QR CODE

    • 微信公众号

    • 手机端网站

    乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
    友情链接 交换友情链接
    八点广告   成都花箱厂家   添翼二手车鉴定评估   工业净化空调   做网站   免备案空间   自适应网站建设   绵阳梓潼做网站   眉山电信机房托管   重庆服务器托管   

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved   蜀ICP备2021004003号-25

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 

    蜀ICP备2021004003号-25