我实际情况是想做个记帐app,由上到下有一个显示金额的框,有一些其他的选项或输入框,云云。点击显示金额的框就会在底部弹出键盘,按键由0-9,小数点,+-*/,AC,=构成。于是问题就变成了我要做一计算器,我且将之分为显示计算结果的区域和键盘区域。

显示金额区域属于父级Controller,如BigController。

// big.controller.js
function BigController($scope) {
  $scope.money = 0;
}

// big.html
<div>
  <div>{{ money }}</div>
  <my-keyboard calculation="money"></my-keyboard>
</div>

键盘区域便是上方代码中的my-keyboard了,我的directive是这样写的

// my-keyboard.direcitve.js
function myKeyboard() {
  var directive = {
    restrict: 'EA',
    scope: {
      calculation: '='
    },
    templateUrl: 'templates/keyboard.html',
    replace: true,
    controller: KeyboardController
  };

  return directive;

  KeyboardController.$inject = ['$scope'];

  function KeyboardController($scope) {
    ...
    $scope.calculation = 123456;
    ...
  }
}

这样做,修改calculation就能父级的money就能同步了,这样做的好处,我只能想到是这个键盘可以放在任何地方,只要给他绑定一个外部scope的变量,他就可以同步更新。

有个问题,本来指令就是继承了父级控制器的scope,直接操作money不是更简单吗?虽然网上有说,没去细究也只懂个大概而已,至于更深层次的道理,我就不懂了,如果看官觉得我这样用ng不对或者有更好的建议,不妨写下评论,让我学习学习


Doyle
844 声望16 粉丝

前端, angular, vue


引用和评论

0 条评论