• angular自定义指令传值---父级与子级之间的通信


    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');

      }

  • 相关阅读:
    冒泡排序
    数组去重
    DOM 操作入门(二)
    DOM 操作入门(一)----- 在指定位置动态插入节点
    事件流的捕获和冒泡 ---- 事件对象
    call, apply, bind -----【改变this指向的三大利器】
    闭包和垃圾回收机制
    回调函数 -----【全球化下的产业分工】
    处理Excel表格里面的数据
    Web后台获取服务器相关信息
  • 原文地址:https://www.cnblogs.com/shixy1617/p/8580732.html
Copyright © 2020-2023  润新知