angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值;

例如:

模块我定义为myApp,index.html定义 <my-html bol-val="bolVal"></my-html>,index的controller定义为myAppCtrl;

js:  angular.module('app.myApp')

  .controller('myAppCtrl',['$scope','myService',myAppCtrl])

  .service('myService',function(){

    var obj = {};

    this.setValue = function(key,value){

      obj[key] = value;

    };

    this.getValue = function(key){

      return obj[key];

    };

    this.clearValue = function(key){

      delete obj[key]

    };

  })  //这个比较关键

  .directive('myHtml',function(){

   function myHtmlCtrl($scope,myService){

    //子页面逻辑

    $scope.myFn=function(){

      alert('Hello Word!');

    };//假设有这样一个函数

    (1)父级给子级传过来的值console.log($scope.bolVal);

    (2)子级要传给父级的值,例如要传一个变量$scope.isShow = true,

    则这样设置:myService.setValue('isShow',$scope.isShow)//变量名称可以自己定义,我为了方便还直接取了isShow;

  }

  return {
    restrict: 'E',
    replace: true,
    scope:{
      bolVal:'=' //有时这个值不一定拿得到,是因为嵌套层级太多,需要传过去一个对象才能拿到,看情况而定,如果父级传过来是个函数,那用“&”

    },
    templateUrl:'app/myapp/myhtml.html',//子级html文件所在路径
    controller:['$scope','myService',myHtmlCtrl],
    controllerAs:'vm',
    link: function ($scope,element,attrs) {

      //link函数这里主要进行dom操作

      (1)第一种:可以调用子级的方法。我这里是监听传过来值的变化对这个子页面进行dom操作
      $scope.$watch('bolVal', function (nwVal, odVal) {
        if (nwVal != odVal) {
          $scope.myFn();
        }  
      });

      (2)第二种:可以灵活调用父级方法。

      这里link可以做很多事情,我就不多说了,可以多找几个例子看看!

    }
  };

 });

 index页面controller逻辑

  function myAppCtrl($scope,myService){

    //业务逻辑    

    (1)父传子:

      如果index页面有一个$scope.bolVal = true值;我想要传到子页面myhtml.html中,

      那很简单如上写法页面里定义bol-val="bolVal",切记:遇到大写的一定加“-”并改为小写,

      directive return 对象scope里bolVal:"="

    (2)子传父:

      如果myhtml页面中有一个值想要传到index页面,那就比较复杂,angularJs用法还是比较灵活的,

      可以写一个service服务两个controller中分别注入,例如定义为myService,如上;

      这时,在子页面myhtml的controller里边设置要传的值,在父页面获取传过来的值;

      父页面取值,注意一点:这个值有可能会保存到本地,所以设置之前要先清除:

        myService.clearValue('isShow');

        myService.getValue('isShow');

  }

angularJs 自定义指令传值---父级与子级之间的通信的更多相关文章

  1. vue $emit 父组件与子组件之间的通信(父组件向子组件传参)

    1.首先新建一个子页面为 env.vue的文件(名字这里大家可以自取) 2.然后把子页面引入父页面,代码如图: import env from '@/components/common/env' ex ...

  2. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  3. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  4. AngularJs自定义指令详解(1) - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  5. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  7. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

  8. js父页面和子页面之间传值

    今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...

  9. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

随机推荐

  1. OC中RAC编程block的基本使用

    在OC中block的基本使用 // // ViewController.h // RAC--test // // Created by Aaron on 17/1/17. // Copyright © ...

  2. mysql从删库到跑了

    常用的数据库有哪些? oralce,sqlserver,mysql,db2 有钱就用oracle吧 oracle和mysql的区别:https://zhidao.baidu.com/question/ ...

  3. win10专业版激活(亲测可用)

    1.slmgr.vbs /upk 2.slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX 3.slmgr /skms zh.us.to 4.slmgr /ato

  4. [算法]从Trie树(字典树)谈到后缀树

    我是好文章的搬运工,原文来自博客园,博主July_,地址:http://www.cnblogs.com/v-July-v/archive/2011/10/22/2316412.html 从Trie树( ...

  5. MFC默认窗口类名称

    // special AFX window class name mangling #ifndef _UNICODE #define _UNICODE_SUFFIX #else #define _UN ...

  6. MySQL11月16-11月21日活动赠送的优惠券使用率_20161124

    一.11.16到21号活动规则是 单笔订单最高的金额划分客户为399,799,1599元三档 达标的分别赠送对应的优惠券 优惠券ID有标号区间 THEN "1599档" ELSE ...

  7. 2084. Asm.Def的基本算法

    2084. Asm.Def的基本算法 传送门 ★☆   输入文件:asm_algo.in   输出文件:asm_algo.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] ...

  8. WPF开发学习笔记(转)

    总结下学习WPF的笔记,方便查阅 1   编译 添加程序集引用:WindowsBase.dll,PresentationCore.dll,PresentationFramework.dll 2  布局 ...

  9. bzoj 3232 圈地游戏——0/1分数规划(或网络流)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3232 当然是0/1分数规划.但加的东西和减的东西不在一起,怎么办? 考虑把它们合在一起.因为 ...

  10. puppet初始化安装和配置(puppet自动化系列1)

    一.服务器规划 以下均直接yum安装最新版. 服务器操作系统为centos6.2 Puppetmaster1 10.168.32.116 puppstmaster1.jq.com Puppetmast ...