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

  }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM